HTML5 canvas beginPath() 方法

最新推荐文章于 2024-08-14 05:19:50 发布

weixin_33973600

最新推荐文章于 2024-08-14 05:19:50 发布

阅读量105

点赞数

原文链接：http://www.cnblogs.com/huaan011/p/5638047.html

版权

beginPath() 方法开始一条路径，或重置当前的路径。w3school上的解释！

路径是canvas里很重要的一个概念，刚开始学canvas的人对路径理解不是很深，他们在用canvas的时候会乱用beginPath(),今天做了一个小demo来说明一下路径

<html lang="en-US">  
<canvas id=myCanvas width=500px height=500px></canvas>  
  
<script>  
    var myCanvas = document.getElementById("myCanvas");  
    var context = myCanvas.getContext("2d");  
      
    context.fillStyle = "#e4e4e4";  
    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();  
</script>  
</html>

　　如果不对这段代码做改动的话，显示的一条红线和蓝线，大家会想，这有什么好说的呢，肯定是这样啊。

接下来我们把第二个的context.stroke()注释起来，你会发现最后的结果只是一条蓝线，因为第一个路径没有stroke(),紧接着

context.beginPath();

就重新开辟了一个路径，使得只能画了第二个路径的直线，大家是不是发现越来越神奇了呢？

紧接着我把不注释context.stroke()，而把context.beginPath()注释起来，你发现什么了？很奇妙，你发现了一条紫线和蓝线，为什么呢？原来是因为没有开辟新的路径，所以第二个stroke()又重新画了第一条直线，并且用了蓝色，而第一个stroke()已经用红色画了第一条直线了，蓝色和红色的结合就变成了紫色，第二

context.stroke();绘画了蓝色。

你想想，如果把beginPath()和stroke()都注释起来会怎么样呢？两条蓝色的直线，you are good

转载于:https://www.cnblogs.com/huaan011/p/5638047.html

weixin_33973600

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 canvas beginPath() 方法

beginPath() 方法开始一条路径，或重置当前的路径。w3school上的解释！路径是canvas里很重要的一个概念，刚开始学canvas的人对路径理解不是很深，他们在用canvas的时候会乱用beginPath(),今天做了一个小demo来说明一下路径<html lang="en-US"> <canvas id=myCanvas width=500...
复制链接

扫一扫