<canvas width="600" height="400"></canvas>

var myCanvas=document.querySelector('canvas');
    //獲取上下文
    var ctx=myCanvas.getContext('2d');
    ctx.beginPath();//每次畫不同樣式的直線都開始新的路徑，這樣才不會樣式覆蓋
    //移動畫筆
    ctx.moveTo(100,100);
    //繪製直線
    ctx.lineTo(200,100);
    ctx.strokeStyle="blue";
    ctx.lineWidth=10;
    ctx.stroke();


    ctx.beginPath();
    ctx.moveTo(100,300);
    ctx.lineTo(200,300);
    ctx.strokeStyle="green";
    ctx.lineWidth=20;
    //描邊
    ctx.stroke();
 

填充三角形：

首先我們畫了一個三角形：

var myCanvas=document.querySelector('canvas');
    //獲取上下文
    var ctx=myCanvas.getContext('2d');
    ctx.lineWidth=10;
    ctx.moveTo(100,100);
    ctx.lineTo(200,100);
    ctx.lineTo(200,200);
    ctx.lineTo(100,100);
    ctx.stroke();

但是發現：

原因和之前線段模糊是一樣的

解決：開啟canvas的自動閉合

 var myCanvas=document.querySelector('canvas');
    //獲取上下文
    var ctx=myCanvas.getContext('2d');
    ctx.lineWidth=10;
    ctx.moveTo(100,100);
    ctx.lineTo(200,100);
    ctx.lineTo(200,200);
    ctx.closePath();
    ctx.stroke();
 

填充的話只要一個函式就行了：

ctx.fill();