Canvas 绘制基本的图形

初始化

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

直线

//帽子lineCap: butt\round\square
//拐点lineJoin: miter\round\bevel
//虚线setLineDash: ([5,10,15])

ctx.beginPath();
        ctx.moveTo(100, 20);
        ctx.lineTo(125, 10);
        ctx.lineTo(150, 20);
        ctx.lineCap = 'round';
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 5;
        //描边
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(100, 50);
        ctx.lineTo(150, 50);
        ctx.lineCap = 'square';
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 5;
        //描边
        ctx.stroke();

        //渐变
        for (let i = 0; i < 255; i++) {
            ctx.beginPath();
            ctx.moveTo(250 + i - 1, 25);
            ctx.lineTo(250 + i, 25);
            ctx.lineWidth = 20;
            ctx.strokeStyle = `rgb(100,${i},${i})`;
            ctx.stroke();
        }

三角形

闭合closePath

//三角形(闭合)
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(50, 25);
ctx.lineTo(50, 50);

ctx.closePath();
//描边
ctx.fill();

矩形

非零环绕，通过逆序实现镂空矩形

ctx.beginPath();
ctx.moveTo(175, 25);
ctx.lineTo(200, 25);
ctx.lineTo(200, 50);
ctx.lineTo(175, 50);
ctx.closePath();

ctx.moveTo(180, 30);
ctx.lineTo(180, 40);
ctx.lineTo(190, 40);
ctx.lineTo(190, 30);
ctx.closePath();
//描边
ctx.fillStyle = "green";
ctx.fill();