Question

我正在编写一个生成图像的javascript / canvas脚本。我在浏览器之间遇到了完全不同的行为，我似乎无法理解它为什么会发生或者如何避免它。

我的代码基本上是这个版本的一个版本，假设X和Y包含行的坐标：

//this section of code is repeated a large number of times. 

CTX.strokeStyle = 'rgba(0,0,0,0.05)';
CTX.lineWidth = 1 ;


for(var i = 0;i<NUM;i++){
  for(var j = 0;j<NUM,j++){

    if (!F[i*NUM+j]){
      // i and j are not friends
      // and should not have a line between them
      continue;
    }

    var ax = X[i];
    var ay = Y[i];
    var bx = X[j];
    var by = Y[j];

    CTX.beginPath();
    CTX.moveTo(ax,ay);
    CTX.lineTo(bx,by);
    //CTX.closePath(); // not needed. but removing does not fix problem.
    CTX.stroke();
  }
}

请注意，这些线条紧密重叠，这就是我将alpha值设置得如此之低的原因。应该逐渐曝光图像。

以下是显示行为的图片：

左：来自firefox的图片的一部分。右：来自铬的图像的一部分 Left: part of an image from firefox. Right: part of an image from chromium

左侧示例是所需的行为。

我的假设是，这与两个浏览器中的antialising有关，但我找不到讨论这种行为的任何地方。我只找到人们的例子，如果你想要“像素图形”，你应该将你的坐标四舍五入到整数，但这是一个有点不同的事情。 “

问题：

你知道为什么会这样吗？
我可以以某种方式避免它吗？

更新

以下是代码的永久链接：https://bitbucket.org/inconvergent/orbitals_js/src/30f33d11461f4b307fe4a09048bd1b3af4960d31/index.htm
我写过chrome。事实证明，当我遇到这个问题时，我实际上正在使用铬。在ubuntu 13.10上。将在我的机器上测试镀铬并发回。

Answer 1

Canvas很乱，但有些解决方案在那里：

像素操作

为了允许子像素绘图，画布的所有浏览器实现都采用抗锯齿（尽管这似乎不是HTML5规范中的要求）。如果要绘制清晰的线条并注意结果看起来模糊，请记住消除锯齿的重要性。要解决此问题，您需要舍入到整数值或偏移半个像素，具体取决于您是否正在绘制填充或描边。
双缓冲
子像素渲染
createPattern


FWIW, there is a workaround to get anti-aliased clipped edges for drawing an image to a canvas.

Instead of this:

ctx.beginPath();
(draw a fancy path)
ctx.clip();
ctx.drawImage(myImage, ...);

Do this:

ctx.fillStyle = ctx.createPattern(image);
ctx.beginPath();
(draw a fancy path)

<强>参考

Canvas在浏览器之间做不同的抗锯齿吗？

1 个答案: