canvas-----绘制平行不同样式线段+填充三角形的绘制

<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();