canvas closePath()

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

看到此方法会不会联想到beginPath方法,并对它们之间的关系产生一些猜想。

编程语言中,很多语法结构是相互照应的,比如endsWith方法与startsWith方法。

既然beginPath方法可以创建一个新的路径,那么closePath方法是不是用来结束一个路径。

答案是否则定的,closePath几乎与beginPath方法没有任何关联。

关于beginPath方法的使用可以参阅canvas beginPath()一章节。

closePath方法的功能并不是结束一个路径,而是闭合一个子路径。

它可以将子路径的终点与起点连接起来。

代码实例如下:

[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.beginPath();
  ctx.strokeStyle = "blue";
  ctx.moveTo(30,20);
  ctx.lineTo(30,120);
  ctx.lineTo(100,120);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant"></canvas>
</body>
</html>

代码运行效果截图如下:

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

可以看到路径的起点位置与终点位置并没有闭合。

代码修改如下:

[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.beginPath();
  ctx.strokeStyle = "blue";
  ctx.moveTo(30,20);
  ctx.lineTo(30,120);
  ctx.lineTo(100,120);
  ctx.closePath();
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant"></canvas>
</body>
</html>

代码运行效果截图如下:

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

可以看到路径的终点位置和起点位置被一条线连接起来。

这就是closePath方法的作用,用来闭合一个路径。

[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.beginPath();
  ctx.strokeStyle = "blue";
  ctx.moveTo(30,20);
  ctx.lineTo(30,120);
  ctx.stroke();

  ctx.beginPath();
  ctx.strokeStyle = "red";
  ctx.moveTo(30,120);
  ctx.lineTo(100,120);
  ctx.lineTo(140,190);
  ctx.closePath();
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant" width="300" height="300"></canvas>
</body>
</html>

代码运行效果截图如下:

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

第一段代码中,位置一与位置二连接起来,但是上面的代码是位置三与位置四连接起来。

这是因为closePath方法闭合当前路径的起始位置与结束位置,上面代码中,closePath方法位于新创建的路径中,与前面已经绘制完毕的图案没有任何关系,这需要对路径概念有所了解,具体参阅下面两篇文章。

(1).路径可以参阅canvas路径与子路径详解一章节。

(2).beginPath可以参阅canvas beginPath()一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:canvas beginPath()下一篇:canvas moveTo()
返回顶部