canvas lineWidth绘制原理

2018-9-13 11:13| 作者: admin| 查看: 1664| 评论: 0|来自: 蚂蚁部落

关于线条宽度绘制原理在canvas 1px像素模糊现象解决方案一章节中有所涉及。

如果没有良好掌握canvas绘制线条原理,可能会导致一系列意想不到问题。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin:50px;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.lineWidth = 20;
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 0);
  ctx.lineTo(200, 200);
  ctx.lineTo(0, 200);
  ctx.closePath();
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="550" height="450"></canvas>
</body>
</html>

上面代码绘制了一个具有四个边框的矩形图案,通过lineWidth设置每一个线条的厚度为20px。

但是绘图的实际表现却有些让人匪夷所思。

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/14/211042h2sryttnx2rr6yt6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

是不是对上面绘制的图形有一些疑问,为什么左上两边只有10px的宽度。

下面通过图示分析一下出现上述现象的原因。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/13/111852bcj9hgfgaldah7fj.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

当想要绘制从(3,1)到(3,5)的一条直线,那么这个直线的宽度默认并不会实现第二个图的效果。

因为宽度会沿着线条宽度的中线(红线)向两端扩展,根据需求,只要填充深蓝色的部分即可,但是计算机并不会这样。因为它不会只绘制一个像素单元格的一半,剩余的的一半也会被填充。

整个区域(浅蓝和深蓝的部分)会以实际设置颜色一半色调的颜色来填充。

但是如果线条的宽度是偶数,线条同样会从中线向两端扩展,但是能完整的填满两端的像素,那么填充颜色会保持不变。第二个网格图片演示如何实现绘制一像素直线时候,能够精准定位和保持填充颜色不变的效果,我们只要从(3.5,1)位置绘制,这样就能够完美的填充一个像素宽度。

代码运行怪异出现的原因:

原理介绍完毕,那么代码绘制出现的怪异现象原因也就很明显了。

[JavaScript] 纯文本查看 复制代码
ctx.lineWidth = 20
ctx.moveTo(0, 0);
ctx.lineTo(200, 0)

从左到右绘制一条横向长度200px,厚度为20px的线条。

线条的绘制在垂直方位上也是从中线在垂直方位向两端扩展绘制。

图示如下:
a:3:{s:3:\"pic\";s:43:\"portal/201809/14/161426wfnjuwqpcfkfvph5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码左上边框之所以显示是10px,是因为由于从中线开始绘制向两端扩展。

所以有一半的宽度被边缘给遮挡了,只要调一下绘制就会全部显示出来。

垂直和水平方位的绘制原理都是想通的。

代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
    border: 2px dotted #ccc;
    margin:50px;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.lineWidth = 20;
  ctx.moveTo(20, 20);
  ctx.lineTo(200, 20);
  ctx.lineTo(200, 220);
  ctx.lineTo(20, 220);
  ctx.closePath();
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="550" height="450"></canvas>
</body>
</html>

上述代码只是向右下挪动一下位置,被遮挡的部分边框就会被显示出来。


鲜花

握手

雷人

路过

鸡蛋
返回顶部