原创作品,转载需得到原作者书面许可,同时保留原作者和出处,否则将追究法律责任。
beginPath方法可以新建一个路径,使用方式十分简单。
正是由于它的简单,反而会导致不少初学者忽略此方法所涉及的一些概念。
下面举一个初学者最容易犯的错误,代码实例如下:
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <script> window.onload = function () { let canvas = document.getElementById("ant"); let ctx = canvas.getContext("2d"); ctx.lineWidth = 6; ctx.beginPath(); //目的绘制一条红色的竖线 ctx.strokeStyle = "red"; ctx.moveTo(100, 10); ctx.lineTo(100, 80); ctx.stroke(); //目的绘制一条蓝色的竖线 ctx.lineTo(200, 80); ctx.strokeStyle = "blue"; ctx.stroke(); } </script> </head> <body> <canvas id="ant"></canvas> </body> </html>
上述代码的初衷是绘制一条红色竖线和蓝色的横线。
代码运行效果截图如下:
很明显,代码实际运行效果与预期效果有偏差,竖线并非红色而是蓝色。
出现上述问题,主要对路径概念理解不够导致。
出现问题的原因:
(1).canvas中,任何时刻只有一条路径,此路径可以拥有多个子路径。
(2).创建绘图环境会隐式调用beginPath方法创建一个路径,所以第一个beginPath方法可以省略。
(3).创建路径后,可以在其上面创建多个子路径,子路径的创建非常简单,比如利用lineTo, arcTo和quadraticCurveTo等方法创建,但如果这些子路径在一个路径中,那么描边或者填充用颜色是统一的(后面覆盖前面)。
(4).上面的代码中,首先绘制红色的竖线,描边颜色是红色,然后再绘制一条横线,描边颜色是蓝色,由于它们在同一条路径中,那么整个路径会被重新进行一次描边操作,红色将会被后面绘制的蓝色所覆盖。
代码修改如下:
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <script> window.onload = function () { let canvas = document.getElementById("ant"); let ctx = canvas.getContext("2d"); ctx.lineWidth = 6; ctx.beginPath(); //目的绘制一条红色的竖线 ctx.strokeStyle = "red"; ctx.moveTo(100, 10); ctx.lineTo(100, 80); ctx.stroke(); //目的绘制一条红色的竖线 ctx.beginPath(); ctx.moveTo(100, 80); ctx.lineTo(200, 80); ctx.strokeStyle = "blue"; ctx.stroke(); } </script> </head> <body> <canvas id="ant"></canvas> </body> </html>
代码运行效果截图如下:
上述代码成功实现了绘制两条不同颜色直线的效果。
与第一个例子唯一不同是添加了两行代码:
[JavaScript] 纯文本查看 复制代码ctx.beginPath(); ctx.moveTo(100, 80);
解决方案分析如下:
(1).beginPath方法可以创建一个新的路径,并清除之前路径和子路径(不是已经绘制的图案)。
(2).那么从现在开始,我们在一个全新的路径中进行绘图,这也是为什么要再次使用moveTo方法的原因,因为已经在新的路径,所以需要重新设定画笔的起点位置。
相关阅读:
(1).关于路径知识更多内容可以参阅canvas路径与子路径详解一章节。
(2).moveTo方法可以参阅canvas moveTo方法一章节。
前端教程
HTML5 API
鲁ICP备10022556号-3
鲁公网安备 37021302000666号
关于我们
|手机版|小黑屋|
Copyright © 2012-2020 Design: 蚂蚁部落