Canvas---绘制一个填充的三角形

绘制一个填充的三角形

1. 关闭路径 closePath

2. 填充 fill

 

<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.绘制一个三角形*/
    ctx.moveTo(100,100);
    ctx.lineTo(200,100);
    ctx.lineTo(200,200);
    /*起始点和lineTo的结束点无法完全闭合缺角*/
    /*使用canvas的自动闭合 */
    //ctx.lineTo(100,100);
    /*关闭路径*/
    ctx.closePath();

    ctx.lineWidth = 10;
    /*2.描边*/
    ctx.stroke();
    /*3.填充*/
    //ctx.fill();