使用Canvas繪製簡單工程符號（續）

gc_2299發表於2020-10-28
Canvas符號

  上一篇文章《使用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

相關文章