canvas beginPath()

2018-9-28 21:26| 作者: admin| 查看: 1184| 评论: 0|来自: 蚂蚁部落

原创作品，转载需得到原作者书面许可，同时保留原作者和出处，否则将追究法律责任。

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>

上述代码的初衷是绘制一条红色竖线和蓝色的横线。

代码运行效果截图如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201809/28/212710lkhl39f49gv34tj4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

很明显，代码实际运行效果与预期效果有偏差，竖线并非红色而是蓝色。

出现上述问题，主要对路径概念理解不够导致。

出现问题的原因：

（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>

代码运行效果截图如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201809/28/212755dpkjj2mv4tgwjzvj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

上述代码成功实现了绘制两条不同颜色直线的效果。

与第一个例子唯一不同是添加了两行代码：

[JavaScript] 纯文本查看 复制代码
ctx.beginPath();
ctx.moveTo(100, 80);

解决方案分析如下：

（1）.beginPath方法可以创建一个新的路径，并清除之前路径和子路径（不是已经绘制的图案）。

（2）.那么从现在开始，我们在一个全新的路径中进行绘图，这也是为什么要再次使用moveTo方法的原因，因为已经在新的路径，所以需要重新设定画笔的起点位置。

相关阅读：

（1）.关于路径知识更多内容可以参阅canvas路径与子路径详解一章节。

（2）.moveTo方法可以参阅canvas moveTo方法一章节。

鲜花

握手

雷人

路过

鸡蛋

收藏分享

上一篇：canvas getContext()方法下一篇：canvas closePath()