canvas 填充覆盖描边

2018-10-20 13:18| 作者: admin| 查看: 244| 评论: 0|来自: 蚂蚁部落

填充和描边是canvas中最为基本的操作,本文不做详细介绍。

更多内容可以参阅canvas 设置矩形样式一章节。

但是有时候,这些操作会带来令人奇怪的现象,比如本文将要介绍的填充覆盖描边。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.rect(10, 10, 100, 100);
  ctx.lineWidth=10;
  ctx.strokeStyle="blue";
  ctx.fillStyle="red";
  ctx.stroke();
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/131940wzazommkvvmfvf6p.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).lineWidth属性设置描边宽度为10px,也就是边框的厚度。

(2).fillStyle属性设置填充颜色为红色。

(3).很明显边框的描边宽度没有10px,也就是它很可能被填充遮盖了。

原理很简单,canvas绘制线条的时候,并不是沿着它的起始位置向外扩展,而是将这个起始位置作为中线向两侧扩展,这么说可能大家还不明白,具体参阅canvas lineWidth绘制原理一章节。

如果不想出现上述现象,可以采用如下解决方案:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.rect(10, 10, 100, 100);
  ctx.lineWidth=10;
  ctx.strokeStyle="blue";
  ctx.fillStyle="red";
  ctx.fill();
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/20/132017vle5dmjfl13evdkv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码的表现已经恢复正常,很简单只要将ctx.fill方法和ctx.stroke方法调整一下位置即可。

也就是先填充再描边,那么描边就会覆盖在填充之上,后来者居上,很轻松解决此问题。

在网上也有关于此方面的解决方案,最好还是要了解出现此问题的原理。

可以做到举一反三,而不是头痛医头脚痛医脚,仅浮在表面。

更多canvas知识可以参阅canvas教程板块。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部