canvas beginPath()

2018-9-28 21:26| 作者: admin| 查看: 1425| 评论: 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方法一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部