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

Question

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

Answer 1

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

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

Answer 2

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

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。