Canvas 绘制基本的图形

初始化

1 var myCanvas = document.querySelector('canvas');
2 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

1 //三角形(闭合)
2 ctx.beginPath();
3 ctx.moveTo(25, 25);
4 ctx.lineTo(50, 25);
5 ctx.lineTo(50, 50);
6 
7 ctx.closePath();
8 //描边
9 ctx.fill();

矩形

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

 1 ctx.beginPath();
 2 ctx.moveTo(175, 25);
 3 ctx.lineTo(200, 25);
 4 ctx.lineTo(200, 50);
 5 ctx.lineTo(175, 50);
 6 ctx.closePath();
 7 
 8 ctx.moveTo(180, 30);
 9 ctx.lineTo(180, 40);
10 ctx.lineTo(190, 40);
11 ctx.lineTo(190, 30);
12 ctx.closePath();
13 //描边
14 ctx.fillStyle = "green";
15 ctx.fill();

 

posted @ 2019-12-15 16:31  咖啡漩涡  阅读(195)  评论(0)  编辑  收藏  举报