canvas总结：线段宽度与像素边界

最新推荐文章于 2024-01-11 00:00:00 发布

banshan1919

最新推荐文章于 2024-01-11 00:00:00 发布

阅读量495

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/v-rockyli/p/3833845.html

版权

在canvas中，我们经常需要绘制线段，主要使用moveTo和lineTo两个方法，moveTo移动至线段起始点，lineTo将线段绘制至终点。同时，绘制线段时可以指定线段的宽度，使用lineWidth属性，lineWidth默认为1，必须大于0

moveTo(x, y): 移动至坐标x，y

lineTo(x, y): 线段终点坐标x，y

简单绘制代码如下：

var context = document.getElementById('canvas').getContext('2d');
context.lineWidth = 2; //设置线宽
context.beginPath(); //开始绘制路径
context.moveTo(0, 50); //移动至起始点
context.lineTo(50, 50); //移动至终点
context.stroke(); //绘制

Done, 绘制出了一条线宽为2的线段，就这么简单

那我们再绘制一条线宽为1的线段

context.lineWidth = 1;
context.beginPath();
context.moveTo(50, 50);
context.lineTo(100, 50);
context.stroke();

我勒个去，怎么跟线宽2的宽度是一样的，宽度也是2，只是颜色稍浅。

那我们换个思路，刚才绘制的Y轴左边为50，我们改成50.5呢，分别再绘制两条线宽分别是2和1的线段

context.lineWidth = 2;
context.beginPath();
context.moveTo(0, 70.5);
context.lineTo(50, 70.5);
context.stroke();

context.lineWidth = 1;
context.beginPath();
context.moveTo(0, 80.5);
context.lineTo(50, 80.5);
context.stroke();

从上至下分别称为线段1，2，3，4

显然，线段3比1，2都要宽，实际为3px，线段4实际为1px

线段1：绘制线宽2，实际宽度2

线段2：绘制宽度1，实际宽度2

线段3：绘制宽度2，实际宽度3

线段4：绘制宽度1：实际宽度1

只有1和4才是我们想要的结果

为什么呢？

其实，这跟canvas的绘制逻辑有关，当我们试图绘制一个线段时，canvas会读取lineWidth,，然后尝试将在坐标处两边各绘制一半的lineWidth，比如我们下图：

我们在坐标3处画一条宽为1的横线，canvas会以3为中轴线，在两边各画0.5像素，深蓝色就是我们期望的效果（2.5-3.5，1个像素），但实际上，浅蓝色也会被绘制出来，因为canvas无法在整个像素宽内只绘制半个像素，所以坐标轴上下两个方向都都会被扩展至整个像素宽度内（2-4，两个像素），但是扩展的像素实际的值并不是原值相同，而是取其一半，所以最直接的视觉感受是：线条比预想的变宽了，但是颜色浅了很多。