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() 方法的主要内容，如果未能解决你的问题，请参考以下文章
Day08 - HTML5 Canvas 实现彩虹画笔绘画板指南