從基礎研究canvas，我們從簡單的線段開始，一步一步繪制復雜圖形

html code

<style type="text/css">
    #can1{background-color: cadetblue;}
</style>
<div class="justify-content-sm-center text-center">
    <canvas id="can1" width="800" height="800"></canvas>
</div>

在html里，我們定義了一個畫布，為了更加直觀的看出畫布的范圍，添加了背景顏色.
然后我們開始渲染上下文

var can1 = document.getElementById('can1');
//渲染畫布的上下文the rendering context
var ctx = can1.getContext('2d');

<canvas> 元素有一個叫做 getContext() 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。

先畫個矩形

ctx.fillStyle = "#058";//設置顏色
//繪制一個填充的矩形 .fillRect(x,y,width,height);
ctx.fillRect(10,10,60,50);

矩形使用.fillRect(x,y,width,height);繪制

再畫個半透明矩形，并讓他們的一部分重疊在一起。

ctx.fillStyle = "rgba(186, 41, 80, 0.73)";//設置半透明顏色
ctx.fillRect(50,10,50,80);//繪制一個填充的矩形

效果如圖所示:

相交的矩形

通過上面的熱身，你已經(jīng)了解了canvas繪圖，下面我們從線段開始

繪制一段折線

ctx.beginPath();
ctx.moveTo(180,10);
ctx.lineTo(230,30);
ctx.lineTo(180,50);
ctx.lineWidth=5;
ctx.strokeStyle = '#058';
ctx.stroke();

上面的代碼，我們用到了以下幾個函數(shù)和方法：
lineTo()方法
添加一個新點，然后創(chuàng)建從該點到畫布中最后指定點的線條（該方法并不會創(chuàng)建線條）

beginPath()
新建一條路徑，圖形繪制命令被指向到路徑上生成路徑。

fillRect()
該方法繪制“已填色”的矩形。默認的填充顏色是黑色。

stroke()
通過線條來繪制圖形輪廓。

繪制一個封閉的圖形——三角形

在上面的代碼的基礎上，我們只需要再加個函數(shù)ctx.closePath();就能夠封閉這個折線，

我們一般把代碼分成三部分來寫，這樣的代碼比較清晰易懂。

//1、開始定義路徑
ctx.beginPath();
ctx.moveTo(150,10);
ctx.lineTo(200,30);
ctx.lineTo(150,50);
ctx.closePath();

//2、開始設置狀態(tài)
ctx.lineWidth=8;
ctx.fillStyle = '#indianred';
ctx.strokeStyle = '#fbbe0d';

//3、開始繪制
ctx.fill();
ctx.stroke();

因為canvas是基于狀態(tài)繪制的，也就是說，把canvas的各種設置、定義和最后的繪制，分開來寫。

以上代碼，我們又使用了一個函數(shù)：

closePath()

閉合路徑之后圖形繪制命令又重新指向到上下文中。

最終效果：

折線和三角形

這樣一行一行寫，不能方便的在別處復用，我們還是把它封裝成函數(shù)，使用時，只需調(diào)用即可

//繪制三角形的函數(shù)
//定義了繪制起點的x軸坐標,y軸坐標,圖形寬度w,圖形高度h,邊框粗細bW,邊框顏色bC,填充顏色fC
function drawTriangle(x, y, w, h, bW, bC, fC){
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x + w,y+h/2);
    ctx.lineTo(x, y + h);
    ctx.closePath();
    
    ctx.lineWidth = bW;
    ctx.fillStyle = fC;
    ctx.strokeStyle = bC;
    
    ctx.fill();
    ctx.stroke();
}

drawTriangle(30,180,100,90,8,'#8ab62f','#fba670');

用函數(shù)封裝的三角形