使用Canvas绘制简单工程符号（续）

gc_2299

于 2020-10-28 23:51:38 发布

阅读量478

点赞数 1

分类专栏：网页编程文章标签： Ubuntu VSCode Canvas 工程符号扇形

本文链接：https://blog.csdn.net/gc_2299/article/details/109301422

版权

网页编程专栏收录该内容

139 篇文章 8 订阅

订阅专栏

上一篇文章《使用Canvas绘制简单工程符号》中仅介绍了用绘制直线的函数绘制工程符号，剩下一小半形位公差没有绘制，主要是当时还没有看如何在Canvas中绘制曲线。本文中介绍在Canvas中用来绘制弧线和曲线的函数，并将上次没有画完的形位公差补充完整。
参考文献《从0到1 HTML5 Canvas动画开发》中提到弧线和曲线的区别，原来一直没有留意过，正在放在这里作为参考：

曲线图形，一般涉及两种情况：曲线和弧线。曲线和弧线是两个不同的概念，大家要注意区分。简单来说，弧线是圆的一部分，曲线则不一定。弧线上的每个点都具有相同的曲率，曲线则不一定。

Canvas中绘制弧线和曲线主要有以下函数：

arc函数：arc函数可以用来画圆，也可以用来划圆弧；既可以绘制描边图形，也可以绘制填充图形。绘制圆形时，需要以beginPath方法开头，最后以closePath结尾。如果是绘制圆弧，则只需开头的beginPath，不用closePath。arc函数调用后不是直接产生图形，如果是调用stroke函数，则绘制的描边图形，而如果调用的是fill函数，则绘制的是填充图形。
arcTo函数：arcTo函数用于圆弧，但是其输入参数与arc函数差别较大。arc函数的参数很好理解：圆心、半径、起始角度、结束角度及转动方向。而arcTo函数只有3类参数：控制点、终点及半径。圆弧与控制点到起始点的直线、控制点到结束点的的直线相切，再加上半径的可以确定到一个圆弧了。参数中没有指定起点，一般是由lineTo函数或moveTo函数确定；
quadraticCurveTo函数：贝塞尔曲线的原理没有搞清楚（数学学的一般，详细介绍见参考文献2-3），这里只是介绍参数，一个是控制点，另一个是终点坐标。同样，参数中没有指定起点，一般是由lineTo函数或moveTo函数确定。本函数绘制的是二次贝塞尔曲线；
bezierCurveTo函数：本函数绘制的是三次贝塞尔曲线，总共3类参数，控制点1、控制点2及结束点。同样，参数中没有指定起点，一般是由lineTo函数或moveTo函数确定。

本文中的示例主要使用的绘制圆弧的函数。

绘制扇形

参考文献1中给了两个例子，一个描边扇形和一个填充扇形，照着书上的代码写的示例，代码及效果图如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function()
        {   
            var cnv = document.getElementById("canvas");
            var cxt=cnv.getContext("2d");
           
            cxt.beginPath();
            cxt.moveTo(50,50);
            cxt.arc(50,50,75,30*Math.PI/180,120*Math.PI/180,false);
            cxt.closePath();

            cxt.strokeStyle="HotPink";            
            cxt.stroke();  

            cxt.beginPath();
            cxt.moveTo(50,150);
            cxt.arc(50,150,75,30*Math.PI/180,120*Math.PI/180,false);
            cxt.closePath();

            cxt.fillStyle="HotPink";            
            cxt.fill();  
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="300" style="border:1px dashed gray;"></canvas>
</body>
</html>

在这里插入图片描述

绘制形位公差

本次需要绘制形位公差中的圆度、圆柱度、线轮廓度、面轮廓度、同轴度和位置度。剩下的圆跳动和全跳动等学到设置线条箭头的时候再补充。还有圆柱度的两个平行线的坐标只是示意，坐标不准。
在这里插入图片描述
代码及效果图如下所示：

            //yuandu
            cxt.moveTo(50,250);
            cxt.beginPath();
            cxt.arc(50,250,25,0,2*Math.PI,true);
            cxt.closePath();
            cxt.stroke();

            //yuanzhudu
            cxt.moveTo(120,250);
            cxt.beginPath();
            cxt.arc(120,250,25,0,2*Math.PI,true);
            cxt.closePath();  
            cxt.moveTo(70,274);            
            cxt.lineTo(115,217);
            cxt.moveTo(128,280);
            cxt.lineTo(168,236);           
            cxt.stroke();

            //lunkuodu
            cxt.moveTo(180,275);
            cxt.beginPath();
            cxt.arc(180,275,25,0,Math.PI,true);             
            cxt.stroke();

            //mianlunkuodu
            cxt.moveTo(250,275);
            cxt.beginPath();
            cxt.arc(250,275,25,0,Math.PI,true);     
            cxt.closePath();          
            cxt.stroke();

            //tongzhoudu            
            cxt.moveTo(50,320);
            cxt.beginPath();
            cxt.arc(50,320,10,0,2*Math.PI,true);
            cxt.closePath();
            cxt.stroke();
            cxt.beginPath();
            cxt.arc(50,320,25,0,2*Math.PI,true);
            cxt.closePath();
            cxt.stroke();

            //weizhidu
            cxt.moveTo(200,320);
            cxt.beginPath();            
            cxt.arc(200,320,25,0,2*Math.PI,true);
            cxt.closePath();
            cxt.moveTo(160,320);
            cxt.lineTo(240,320);
            cxt.moveTo(200,280);
            cxt.lineTo(200,360);
            cxt.stroke();

在这里插入图片描述

参考文献：
[1]从0到1 HTML5 Canvas动画开发
[2]https://www.zhihu.com/question/29565629
[3]https://baike.baidu.com/item/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF/1091769?fr=aladdin