canvas绘制图形时beginPath应用

当我们在使用canvas绘制图形的时候，不免都会使用到beginPath这个方法。今天我们就来讲解一下这个函数的重要性以及应用。

首先我们来看两段代码：

代码语言：javascript复制

        var ctx = document.getElementById("myCanvas").getContext('2d');
        ctx.beginPath();
        ctx.moveTo(25,25);
        ctx.lineTo(200, 25);
        ctx.lineWidth = 10;
        ctx.strokeStyle = 'green';
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(25,50);
        ctx.lineTo(200, 50)
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'red';
        ctx.stroke();

这段代码非常简单：就是绘制两条线，一条为10px的绿线，一条为2px的红线

然后我们修改一点代码，在运行一次：

代码语言：javascript复制

        var ctx = document.getElementById("myCanvas").getContext('2d');
        ctx.beginPath();
        ctx.moveTo(25,25);
        ctx.lineTo(200, 25);
        ctx.lineWidth = 10;
        ctx.strokeStyle = 'green';
        ctx.stroke();

        //ctx.beginPath();
        ctx.moveTo(25,50);
        ctx.lineTo(200, 50)
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'red';
        ctx.stroke();

我们这里把第二个beginPath给注释掉了，然后我们在看一下效果如何：

看到这里，大家应该也明白了beginPath的用处了吧，我来简单说一下。

在canvas中的绘制方法中stroke，都会以最近一次的beginPath为绘制路径，当代码调用第一次stroke时，绘制了一条10px的绿线，当调用第二次stroke的时候，由于我把第二个beginPath注释掉了，所以他就会去找上一个beginPath作为绘制路径，所以调用第二次stroke时，就会绘制出两条2px的红线。

看到这里大家明白beginPath的作用了吗。

说到了beginPath，closePath也应该经常使用到吧，这两个并不是搭配使用。

closePath只是将路径起点和终点相连接，不会重新开始一个路径，所以想新建一个路径请使用beginPath。

closePath应用代码：

代码语言：javascript复制

        var i = 0;
        var c1 = window.setInterval(myFunction, 1000);
        var ctx = document.getElementById("myCanvas").getContext("2d");
        function myFunction() {
            i  ;
            console.log(i);
            
            if (i == 1) {
                ctx.moveTo(25, 25);
                ctx.lineTo(150, 25);
            }
            if (i == 2) {
                ctx.lineTo(25, 150);
            }
            if (i == 3) {
                ctx.closePath();//将起点与终点连接，形成三角形
                window.clearInterval(c1);
            }
            ctx.stroke();
        }
    </script>

canvas

0 人点赞