canvas绘制图案是重叠绘制而不是重置

2018-9-29 16:16| 作者: admin| 查看: 1854| 评论: 1|来自: 蚂蚁部落

关于路径的相关概念可以参阅canvas路径与子路径详解一章节。

在同一个路径中,设置的属性会作用于整个路径,后面的会覆盖前面的。

上面这句话,在某种程度上是正确的,但是并不严谨。

首先看一段代码实例:

[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/29/161706eu5pw1vnu1g18vi1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

结果由于这两条线都是在同一路径中,后面设置的蓝色会覆盖前面的红色。

从表现结果来看,下面这个结论无懈可击:

[HTML] 纯文本查看 复制代码
在同一个路径中,设置的属性会作用于整个路径,后面的会覆盖前面的

比如后面设置的strokeStyle属性值会覆盖前面设置的strokeStyle属性值。

这是一种视觉上的误导,实质上并不是如此,再来看一段代码实例:

[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.lineWidth = 2;
  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/29/161753fsicmmciqogqbumi.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

怎么回事,难道后面的lineWidth属性没有覆盖前面的lineWidth属性吗。

其实canvas中的绘制是这样的,当图片绘制完成之后,它就是一个事实的存在(当然也可以使用对应方法清除,比如利用clearRect方法,但不在本文考虑范围之内),后面同一路径中,会根据新设置的相关属性重新绘制一次,这里注意了,它不会是清除也不是重置之前绘制的图案,而是将新绘制的图案覆盖在原来图案的上面,由此就出现了上面的绘制效果。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

返回顶部