在 html5 画布上显示 lineWidth=1 不正确

【问题标题】：incorrect display lineWidth=1 at html5 canvas在 html5 画布上显示 lineWidth=1 不正确
【发布时间】：2011-11-28 06:24:55
【问题描述】：

我有例子： https://developer.mozilla.org/samples/canvas-tutorial/4_5_canvas_linewidth.html 但第一行不等于 1 个像素：我怎样才能解决这个问题？（浏览器谷歌浏览器）

【问题讨论】：

标签： html canvas html5-canvas

【解决方案1】：

始终在线条的位置添加 0.5 像素以防止抗锯齿。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors#A_lineWidth_example

【讨论】：

谢谢！我必须从 x = 0.5 而不是 1.0 开始路径

【解决方案2】：

为了让生活更轻松，您可以将整个画布移动 0.5 像素：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.translate(0.5, 0.5); // Move the canvas by 0.5px to fix blurring

它可以防止除图像之外的所有图形上的抗锯齿，因此您必须仅对图像使用 +0.5px。

【讨论】：

-1 这会移除奇数宽度的抗锯齿，但会添加偶数宽度的抗锯齿。