Canva繪製圖形還是很方便的，用來製作動畫，效果是很不錯的，下面簡單介紹一些繪製圖形的方式

圖形的基本元素是路徑：路徑是通過不同顏色和粗細的線段或曲線相連形成的不同形狀的點的集合

2D 繪製上下文支持很多在畫布上繪製路徑的方法，通過路徑可以創造出複雜的形狀和線條，要繪製路徑，首先必須調用 beginPath() 方法，表示要開始繪製新路徑。

一、路徑繪製圖形

開始繪製新路徑
beginPath(): 新建一條路徑，生成之後，圖形繪製命令被指向到路徑上生成路徑
第一步：創建路徑的起始點 (2B鉛筆：下筆)
moveTo(x, y): 把路徑移動到畫布中的指定點，不創建線條
第二步：根據座標畫出路徑(2B鉛筆：移動筆)
lineTo(x, y) : 添加一個新點，然後在畫布中創建從該點到最後指定點的線條
第三步：是否閉合路徑(2B鉛筆：提起筆)
closePath() 方法創建從當前點到開始點的路徑。(閉合路徑)
第四步：路徑生成之後，選擇描邊或者填充路徑的範圍(蠟筆：上色)
1、描邊: stroke() 方法會實際地繪製出通過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色
修改描邊顏色：使用strokeStyle= color;
2、填充: fill() 方法填充當前的圖像（路徑）。默認顏色是黑色。
修改填充顏色：使用fillStyle = color;
注意: 如果路徑未關閉，那麼 fill() 方法會從路徑結束點到開始點之間添加一條線，來關閉該路徑，然後填充該路徑
橡皮擦：
clearRect(x, y, width, height) : 清除某區域
語法： x座標, y座標, 寬度, 高度

一個簡單的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>繪製線條</title>
</head>
<body>
    <canvas id="canvasElem">
        你的瀏覽器不支持canvas，請升級瀏覽器
    </canvas>
    <script> 
        var canvas = document.getElementById('canvasElem');
        canvas.width = 800;
        canvas.height = 800;
        canvas.style.border = '1px solid red';
        var ctx = canvas.getContext('2d');
        
        // 繪製線條的顏色
        ctx.strokeStyle = 'red';

        //繪製線條的尺寸
        ctx.lineWidth = 6;
        
        ctx.beginPath(); 
        ctx.moveTo(50, 50);
        ctx.lineTo(150, 150);
        ctx.lineTo(50, 150);
        ctx.stroke(); 
    </script>
</body>
</html>

效果如下：

如果想要填充裏面的空間，可以使用fill()

ctx.fillStyle = 'green';
ctx.fill();

二、繪製等邊三角形

1.首先，我們先定義一個函數用於把角度轉換成弧度，方便調用

function degToRad(degrees) {  
    return degrees * Math.PI / 180;
}

2. 然後，在代碼中添加下面的內容，以開始路徑的繪製。此處爲我們爲三角形設置了顏色，準備繪制，然後將鋼筆移動至 (50, 50)（沒有繪製任何內容）。然後準備在新的座標開始繪製三角形。

ctx.fillStyle = 'rgb(255, 0, 0)'; 
ctx.beginPath(); 
ctx.moveTo(50, 50);

3. 接下來在腳本中添加以下代碼：

ctx.lineTo(150, 50); 
var triHeight = 50 * Math.tan(degToRad(60)); 
ctx.lineTo(100, 50+triHeight); 
ctx.lineTo(50, 50); 
ctx.fill();

最終代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>繪製圓形</title>
</head>
<body>
    <canvas id="canvasElem">
        你的瀏覽器不支持canvas，請升級瀏覽器
    </canvas>
    <script> 
        var canvas = document.getElementById('canvasElem');
        canvas.width = 800;
        canvas.height = 800;
        canvas.style.border = '1px solid red';
        var ctx = canvas.getContext('2d');

        // 開始繪製三角形
        ctx.beginPath();
        ctx.fillStyle = 'rgb(255, 0, 0)'; 
        ctx.moveTo(50, 50);
        ctx.lineTo(150, 50); 
        var triHeight = 50 * Math.tan(degToRad(60)); 
        ctx.lineTo(100, 50+triHeight); 
        ctx.lineTo(50, 50); 
        ctx.fill();

        // 將角度轉換成弧度
        function degToRad(degrees) {  
            return degrees * Math.PI / 180;
        }
</script>
</body>
</html>

效果圖如下：

思路解析：

首先繪製一條直線，終點座標爲 (150, 50)。此時路徑沿 x 軸向右行走 100 像素。
然後利用三角函數來計算等邊三角形的高。這裏我們要繪製的三角形是朝下的。等邊三角形每個角均爲 60°，爲計算高的值，我們可以將三角形從正中心分割爲兩個直角三角形，每個直角三角形的三個角分別爲 90°、60°、30°。對於邊：

最長的邊稱爲斜邊。
緊挨 60° 角的邊稱爲臨邊，顯然地，它的長度是剛纔繪製的線的一半，即 50 像素。
60° 角對面的邊稱爲對邊，即三角形的高，需要計算得到。

通過基本三角函數可得：臨邊長度乘以角的正切等於對邊長度。於是可得三角形的高爲 50 * Math.tan(degToRad(60)) 。由於 Math.tan() 接受數值的單位爲弧度，於是我們用剛纔的 degToRad() 函數將 60° 換算爲弧度。

4. 有了三角形的高，我們來繪製另一條線，終點座標爲 (100, 50+triHeight) 。X 座標值很簡單，應在剛纔繪製的水平線兩頂點正中間位置。Y 值應爲 50 加上三角形的高，因爲高即三角形底邊到頂點的距離。

5. 下一條線的終點座標爲繪製整個三角形的起點座標。

6. 最後，運行 ctx.fill() 來終止路徑，併爲圖形填充顏色。

三、繪製圓形（arc)

概述：arc() 方法創建弧/曲線（用於創建圓或部分圓）。
    * 語法：ctx.arc(x , y, r, sAngle, eAngle, counterclockwise);
    * arc:  弧（度）弧形物；天穹英 [ɑːk]   美 [ɑrk]
    * counter 反擊，還擊；反向移動，對着幹；反駁，回答  ['kaʊntə]   美 ['kaʊntɚ]
    * 解釋：
        - x,y：圓心座標。
        - r：半徑大小。
        - sAngle:繪製開始的角度。圓心到最右邊點是0度，順時針方向弧度增大。
        - eAngel:結束的角度，注意是弧度。π
        - counterclockwise：是否是逆時針。true是逆時針，false：順時針，默認false;
        - 弧度和角度的轉換公式： rad = deg*Math.PI/180;
        - 在Math提供的方法中**sin、cos等都使用的弧度**

我們先定義一個函數用於把角度轉換成弧度，方便調用

function degToRad(degrees) {  
    return degrees * Math.PI / 180;
}

繪製圓形，扇形，弧度等，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>繪製圓形</title>
</head>
<body>
    <canvas id="canvasElem">
        你的瀏覽器不支持canvas，請升級瀏覽器
    </canvas>
    <script> 
        var canvas = document.getElementById('canvasElem');
        canvas.width = 800;
        canvas.height = 800;
        canvas.style.border = '1px solid red';
        var ctx = canvas.getContext('2d');
        
        // 繪製線條的顏色
        ctx.strokeStyle = 'red';

        //繪製線條的尺寸
        ctx.lineWidth = 6;
 
        //繪製300度的扇形,逆時針繪製,從圓心到弧線起點，再到終點，再閉合
        ctx.moveTo(100,100);
        ctx.arc(100,100,100,degToRad(0),degToRad(300),true);
        ctx.closePath();
        ctx.stroke();
        ctx.fillStyle = 'pink';
        ctx.fill();
 
        //繪製120度的弧線，從弧線起點開始到弧線終點
        ctx.beginPath();
        ctx.moveTo(200,400);
        ctx.arc(100,400,100,degToRad(0),degToRad(120));
        // ctx.closePath();
        ctx.stroke();
 
        //繪製60度的扇形，順時針繪製
        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.arc(200,200,100,degToRad(0),degToRad(60));
        ctx.closePath();
        ctx.stroke();
        ctx.fillStyle = 'yellow';
        ctx.fill();
 
        //繪製圓，從起點到終點
        ctx.beginPath();
        ctx.moveTo(500,400);
        ctx.arc(400,400,100,degToRad(0),degToRad(360));
        ctx.stroke();
        ctx.fillStyle = 'green';
        ctx.fill();


        function degToRad(degrees) {  
            return degrees * Math.PI / 180;
        }


    </script>
</body>
</html>

效果如下：

餅狀圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>餅狀圖</title>
</head>
<body>

    <canvas id="cavsElem">
        您的瀏覽器不支持canvas，請升級瀏覽器
    </canvas>

<script>
    (function(){
        var canvas = document.getElementById('cavsElem');
        var ctx = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = '1px solid red';
 
        var data = [{
            "value": .3,
            "color": "orange",
            "title": "橘子"
        },{
            "value": .4,
            "color": "red",
            "title": "蘋果"
        },{
            "value": .2,
            "color": "yellow",
            "title": "香蕉"
        },{
            "value": .1,
            "color": "pink",
            "title": "櫻桃"
        }];
 
        //定義起始角度
        var tempAngle=-90;
        //定圓心位置
        var x0=300,y0=300;
        //定半徑長度
        var radius=200;
        //從-90度開始繪製
        for(var i=0; i<data.length; i++){
            ctx.beginPath();
            ctx.moveTo(x0,y0);
            //當前扇形角度
            var angle = data[i].value*360;
            //當前扇形起始繪製弧度
            var startAngle = tempAngle*Math.PI/180;
            //當前扇形借結束繪製弧度
            var endAngle = (tempAngle + angle)*Math.PI/180;
            //繪製扇形
            ctx.arc(x0,y0,radius,startAngle,endAngle);
            ctx.stroke();
            //填充扇形
            ctx.fillStyle = data[i].color;
            ctx.fill();
            //當前扇形結束繪製角度，即下一個扇形開始繪製角度
            tempAngle += angle;
        }
    })();
</script>
</body>
</html>

效果如下：

歡迎大家指正補充

Canvas繪製簡單路徑、弧、圓形、餅狀圖

一、路徑繪製圖形

二、繪製等邊三角形

效果圖如下：

思路解析：

三、繪製圓形（arc)

餅狀圖

C#開源的兩款功能強大的錄屏神器

認知提升的方法

螞蟻面試：Springcloud核心組件的底層原理，你知道多少？

JavaScript的排序算法——冒泡排序

JavaScript的排序算法——快速排序

如何實現元素水平垂直居中

CSS中讓元素隱藏的19種方法

【力扣（LeetCode)】面試題64，求1+2+…+n，要求不能使用乘除法、while、for、if 、else、switch、case等關鍵字，使用JavaScript解題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結