HTML5 canvas beginPath() 方法

Posted huaan011

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5 canvas beginPath() 方法相关的知识,希望对你有一定的参考价值。

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

以上是关于HTML5 canvas beginPath() 方法的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 Canvas - 用随机像素颜色填充形状?

HTML5 is Canvas

(自己看)HTML5 Canvas下雨动画DEMO演示

Day08 - HTML5 Canvas 实现彩虹画笔绘画板指南

[js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

html5 js canvas中画星星的函数