首页 > 代码库 > canvas beginPath()的初步理解

canvas beginPath()的初步理解

2024-08-04 14:44:26   234人阅读

canvas的坑真是太大了，w3school上也只是一些简单的例子，还得自己好好研究下。刚学到beginpath()，意思是开始画一条线。

来段代码

<html><head>    <title>canvas</title></head><canvas id=myCanvas width=500px height=500px></canvas><script>    var myCanvas = document.getElementById("myCanvas");    var context = myCanvas.getContext("2d");    context.fillStyle = "#000";    context.fillRect(0,0,500,500);    context.beginPath();    context.moveTo(100,100);    context.lineTo(200,100);    context.strokeStyle = "red";    context.stroke();    context.beginPath();    context.moveTo(100,200);    context.lineTo(200,200);    context.strokeStyle = "blue";    context.stroke();    context.beginPath();    context.moveTo(100,300);    context.lineTo(200,300);    context.strokeStyle = "yellow";    context.stroke();</script></html>

 在不修改代码的前提下，显示的样式是会出现红、蓝、黄、三条线

接下来我们注释第2个stroke()，发现第2根蓝线消失了，仅仅显示红线和黄线。stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

当我们把3个beginPath() 注释起来，神奇的事情就发生了：依次出现了橙、绿、黄三条线。情况貌似是在没有beginPath()的情况下，stroke会叠加执行，即：第一个stroke会画一条红线；第二个stroke会画两条蓝线，第三个stroke会画三条黄线，那么对应的上面橙色线条就是红蓝黄的叠加色，中间绿色就是红和蓝的叠加色，最后的黄色，就是黄色。

 

canvas beginPath()的初步理解


联系
我们