如何在HTML Canvas上绘制不透明线条？

问题原因 #

1. Canvas元素默认背景为透明，当绘制的线条因亚像素渲染（抗锯齿）产生半透明边缘时，会透出下方body的背景图像。
2. 你绘制的竖线使用整数坐标（如x=0），而Canvas坐标系统以像素边缘为基准，整数坐标的线条会被渲染在两个像素之间，浏览器的抗锯齿处理会导致线条边缘出现半透明效果。

解决方案 #

1. 给Canvas设置不透明背景

在CSS中为canvas添加不透明背景色，覆盖默认的透明属性：

canvas {
  margin: 8px; /* 修复原代码中`8 px`的空格错误 */
  border: 1px solid red;
  background-color: #ffffff; /* 添加白色不透明背景 */
}

2. 调整线条坐标对齐像素中心

将线条的x坐标偏移0.5，让线条对齐像素中心，避免亚像素渲染导致的半透明：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var x=0;
while(x < 256) { // 原代码x<=256会超出canvas宽度，改为x<256即可覆盖所有像素列
  ctx.beginPath();
  ctx.moveTo(x + 0.5, 0); // 偏移0.5对齐像素中心
  ctx.lineTo(x + 0.5, 256);
  ctx.stroke();
  x++;
}

3. 可选：关闭Canvas抗锯齿

如果上述方法效果不佳，可以尝试关闭抗锯齿（可能会让线条边缘显得生硬）：

ctx.imageSmoothingEnabled = false;
ctx.lineWidth = 1; // 确保线条宽度为1px

修改后的完整代码 #

<canvas id="myCanvas" width="256" height="256"></canvas>

body {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSoVh3YQcchQnSxIFXHUKhShQqgVWnUwufQLmhiSFBdHwbXg4Mdi1cHFWVcHV0EQ/ABxdHJSdJES/5cUWsR4cNyPd/ced+8AoVFlmtU1Dmi6bWZSSTGXXxFDr+hFCGFEkJCZZcxKUhq+4+seAb7exXmW/7k/R79asBgQEIlnmGHaxOvEU5u2wXmfOMrKskp8Tjxm0gWJH7muePzGueSywDOjZjYzRxwlFksdrHQwK5sa8SRxTNV0yhdyHquctzhr1Rpr3ZO/MFzQl5e4TnMYKSxgERJEKKihgipsxGnVSbGQof2kj3/I9UvkUshVASPHPDagQXb94H/wu1urOJHwksJJoPvFcT5GgNAu0Kw7zvex4zRPgOAzcKW3/RsNYPqT9Hpbix0BA9vAxXVbU/aAyx1g8MmQTdmVgjSFYhF4P6NvygORW6Bv1euttY/TByBLXaVvgINDYLRE2Ws+7+7p7O3fM63+fgBhUnKgA0cniQAAAAZiS0dEAMwAzADM38FfGgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+YJBw4lNF/XAa8AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAg0lEQVQ4y63Uyw2AIBAE0HE62P5rowZK0JOG4ML+4ERk5mkIeLXWbhij9w4AEBErCnqxeZ4CNcBCGcE8a4wWrAwz2C7LLLbqsIJpXVaxGeUJbESJg0NEQM918mLfHlbRsU/tYRb7ncMoquXpCXmx5V220N06oyXrZYx8yZE/9ot49/YB4Ag88RP6jmkAAAAASUVORK5CYII=");
}
canvas {
  margin: 8px;
  border: 1px solid red;
  background-color: #ffffff;
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var x=0;
while(x < 256) {
  ctx.beginPath();
  ctx.moveTo(x + 0.5, 0);
  ctx.lineTo(x + 0.5, 256);
  ctx.stroke();
  x++;
}

内容的提问来源于stack exchange，提问作者pfifo