首页 > 代码库 > canvas beginPath()的初步理解
canvas beginPath()的初步理解
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()的初步理解
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。