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

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的图像的一部分。 右：铬图像的一部分 左：来自Firefox的图像的一部分。右：铬图像的一部分

左边的示例是所需的行为。

我的假设是，这与两个浏览器中的抗锯齿有关，但是我无法在讨论此行为的任何地方找到它。 我只发现一些人的例子，指出如果您想要“像素图形”，则应将坐标四舍五入为整数，但这是有些不同的事情。 “

问题：

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

更新

这是到现在的代码的永久链接： https : //bitbucket.org/inconvergent/orbitals_js/src/30f33d11461f4b307fe4a09048bd1b3af4960d31/index.htm
我写了chrome。 原来，当我遇到这个问题时，我实际上是在使用铬。 在Ubuntu 13.10上。 将在我的计算机上测试Chrome，然后回发。

Answer 1

画布是一团糟，但是有一些解决方案：

像素操纵

为了允许子像素绘图，所有画布的浏览器实现都采用了抗锯齿功能（尽管在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 个解决方案

解决方案1
1 2014-04-25 20:40:34

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

问题描述

1 个解决方案

解决方案1 1 2014-04-25 20:40:34

解决方案1
1 2014-04-25 20:40:34