我正在使用HTML画布，它的像素宽度和高度是32倍。然而，当我在其上绘制线条时，我注意到线条的边缘像素是半透明地绘制的（正好是一半透明）。有办法阻止这个吗？
在this picture中，红线是从一个点到另一个点的单条线。我希望所有的块都是黑色或＃FF0000红色。
N.B。我已经使用canvas.translate（）来正确对齐像素，并使用this post中的解决方案来渲染离散块中的扩展像素。
答案 0 :(得分：4)
Canvas使用消除锯齿功能使图形看起来更加流畅，这就是为什么它在这里和那里填充半透明像素的原因（请参阅this explanation了解其工作原理）。
平滑（也称为插值）可以关闭，但仅适用于图像（ctx.imageSmoothingEnabled = false，顾名思义）。
为此，需要实施“线条渲染器”。然而，典型的线算法仅支持宽度为1像素的线。这包括Bresenham以及EFLA（Po-Han Lin的极快线算法），后者比Bresenham快。
对于厚度大于1像素的线条，您需要找到切线角度，然后沿主线渲染每个线段。
我提供了以下两种实现，我已经在某种程度上进行了优化。他们都不需要访问位图本身，只提供上下文。
您唯一需要记住的是使用fillStyle（和fill()）代替strokeStyle（和stroke()）来设置其颜色。您可以在填充之前生成多条线，这通常比填充每个线段更快，只要它们使用相同的颜色。
您可以选择直接使用图像数据并设置像素，但速度较慢，如果您使用图像则需要CORS（如果首选，请使用带有Uint32视图的位图。还有一些特殊的技巧来加速这个方法，但这里没有提到它们。）
此算法适用于绘制连续多边形线的位置，即。最后一点没有设定。但在下面的实现中，我们手动设置它，以便它可以用于单线段。
访问上面的链接网站，以获得更深入的解释（以及许可证）。
只需确保输入值为整数值：
function lineEFLA(ctx, x1, y1, x2, y2) {
var dlt, mul, yl = false, i,
sl = y2 - y1,
ll = x2 - x1,
lls = ll >> 31,
sls = sl >> 31;
if ((sl ^ sls) - sls > (ll ^ lls) - lls) {
sl ^= ll;
ll ^= sl;
sl ^= ll;
yl = true;
}
dlt = ll < 0 ? -1 : 1;
mul = (ll === 0) ? sl : sl / ll;
if (yl) {
x1 += 0.5; // preset for rounding
for (i = 0; i !== ll; i += dlt) setPixel((x1 + i * mul)|0, y1 + i);
}
else {
y1 += 0.5;
for (i = 0; i !== ll; i += dlt) setPixel(x1 + i, (y1 + i * mul)|0);
}
setPixel(x2, y2); // sets last pixel
function setPixel(x, y) {ctx.rect(x, y, 1, 1)}
}
这是过去许多应用程序和计算机中使用的经典线算法，需要渲染一条简单的线。
详细解释了算法here。
function lineBresenham(ctx, x1, y1, x2, y2) {
if (x1 === x2) { // special case, vertical line
ctx.rect(x1, Math.min(y1, y2), 1, Math.abs(y2 - y1) + 1);
return;
}
if (y1 === y2) { // special case, horizontal line
ctx.rect(Math.min(x1, x2), y1, Math.abs(x2 - x1) + 1, 1);
return;
}
var dx = Math.abs(x2 - x1), sx = x1 < x2 ? 1 : -1,
dy = Math.abs(y2 - y1), sy = y1 < y2 ? 1 : -1,
err = (dx > dy ? dx : -dy) * 0.5;
while(!0) {
ctx.rect(x1, y1, 1, 1);
if (x1 === x2 && y1 === y2) break;
var e2 = err;
if (e2 > -dx) { err -= dy; x1 += sx; }
if (e2 < dy) { err += dx; y1 += sy; }
}
}
var ctx = document.querySelector("canvas").getContext("2d");
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // bg color
ctx.scale(20, 20); // scale
ctx.fillStyle = "#f00"; // color for line in this case
lineEFLA(ctx, 0, 0, 17, 20); // algo 1
lineBresenham(ctx, 3, 0, 20, 20); // algo 2
ctx.fill(); // fill the rects, use beginPath() for next
function lineEFLA(ctx, x1, y1, x2, y2) {
/* x1 |= 0; // make sure values are integer values
x2 |= 0;
y1 |= 0;
y2 |= 0;*/
var dlt,
mul,
sl = y2 - y1,
ll = x2 - x1,
yl = false,
lls = ll >> 31,
sls = sl >> 31,
i;
if ((sl ^ sls) - sls > (ll ^ lls) - lls) {
sl ^= ll;
ll ^= sl;
sl ^= ll;
yl = true;
}
dlt = ll < 0 ? -1 : 1;
mul = (ll === 0) ? sl : sl / ll;
if (yl) {
x1 += 0.5;
for (i = 0; i !== ll; i += dlt)
setPixel((x1 + i * mul) | 0, y1 + i);
} else {
y1 += 0.5;
for (i = 0; i !== ll; i += dlt)
setPixel(x1 + i, (y1 + i * mul) | 0);
}
setPixel(x2, y2); // sets last pixel
function setPixel(x, y) {
ctx.rect(x, y, 1, 1)
}
}
function lineBresenham(ctx, x1, y1, x2, y2) {
if (x1 === x2) { // special case, vertical line
ctx.rect(x1, Math.min(y1, y2), 1, Math.abs(y2 - y1) + 1);
return;
}
if (y1 === y2) { // special case, horizontal line
ctx.rect(Math.min(x1, x2), y1, Math.abs(x2 - x1) + 1, 1);
return;
}
var dx = Math.abs(x2 - x1),
sx = x1 < x2 ? 1 : -1,
dy = Math.abs(y2 - y1),
sy = y1 < y2 ? 1 : -1,
err = (dx > dy ? dx : -dy) * 0.5;
while (!0) {
ctx.rect(x1, y1, 1, 1);
if (x1 === x2 && y1 === y2) break;
var e2 = err;
if (e2 > -dx) {
err -= dy;
x1 += sx;
}
if (e2 < dy) {
err += dx;
y1 += sy;
}
}
}<canvas width=400 height=400></canvas>
提示：这些实现可以通过对垂直和水平线使用单个rect（）进一步优化（显示为Bresenham，而不是EFLA）。 setPixel()用于灵活性（例如，它可以重写以设置位图像素等）。