首页 > 操作系统 >

canvas lineWidth绘制原理

电脑杂谈　发布时间：2019-06-11 07:18:36　来源：网络整理

canvas怎么绘制条形码_canvas 是否绘制_html5 canvas 绘制点

关于线条宽度绘制原理在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。

但是绘图的实际表现却有些让人匪夷所思。
代码运行效果截图如下：

是不是对上面绘制的图形有一些疑问，为什么左上两边只有10px的宽度。
下面通过图示分析一下出现上述现象的原因。

图示如下：

当想要绘制从（3,1）到（3,5）的一条直线，那么这个直线的宽度默认并不会实现第二个图的效果。
因为宽度会沿着线条宽度的中线（红线）向两端扩展，根据需求，只要填充深蓝色的部分即可，但是计算机并不会这样。因为它不会只绘制一个像素单元格的一半，剩余的的一半也会被填充。
整个区域（浅蓝和深蓝的部分）会以实际设置颜色一半色调的颜色来填充。

        // 颜色+是否填充+如果不填充，绘制圆的线条的粗细。完成路径定义工作之后，应用程序便可以利用有关gdi函数来使用路径canvas 是否绘制，这些函数包括绘制路径轮廓strokepath()，填充路径fillpath()，绘制轮廓并填充strokeandfillpath()，把路径转换成区域pathtoregion()，把路径直线化flattenpath()，提取路径数据getpath()，加宽路径widenpath()和设置裁剪路径selectclippath()等。完成路径定义工作之后，应用程序便可以利用有关gdi函数来使用路径，这些函数包括绘制路径轮廓strokepath()，填充路径fillpath ()，绘制轮廓并填充strokeandfillpath()，把路径转换成区域pathtoregion()，把路径直线化flattenpath ()，提取路径数据getpath()，加宽路径widenpath()和设置裁剪路径selectclippath()等。
代码运行怪异出现的原因：
原理介绍完毕，那么代码绘制出现的怪异现象原因也就很明显了。

[JavaScript] 纯文本查看 复制代码

ctx.lineWidth = 20
ctx.moveTo(0, 0);
ctx.lineTo(200, 0)
从左到右绘制一条横向长度200px，厚度为20px的线条。

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

上述代码左上边框之所以显示是10pxcanvas 是否绘制，是因为由于从中线开始绘制向两端扩展。
所以有一半的宽度被边缘给遮挡了，只要调一下绘制就会全部显示出来。
垂直和水平方位的绘制原理都是想通的。
代码修改如下：

					
本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-105206-1.html