HTML5画布的Android像素化

Question

我使用HTML5画布在Android上发生了非常奇怪的效果。这是有问题的代码，它使用的是二次曲线：

ctx.beginPath();
ctx.strokeStyle = wave.stroke;
ctx.moveTo(wave.sx, wave.sy);
ctx.quadraticCurveTo(
  wave.x, wave.y,
  wave.ex, wave.ey
);
ctx.stroke();

它多次使用： http://codepen.io/EightArmsHQ/pen/9f899c4c64ab49113988055432b11a6b

这是在iPhone上：

但这是在Android上：

我说的是Android，但我听说它在Galaxy S6上非常流畅。

作为旁注，我对图形（即GPU等）一般不太熟悉，因此对我应该使用Google搜索的条款有点确定 - 所以如果你有任何明显的解决方案，请保持温和。 / p>

Answer 1

我相信你所看到的是aliasing文物。曲线覆盖不到一个像素，由于某种原因，光栅化可能会完全错过其中的一些。当绘制二次曲线时，这似乎是明确的，而线条甚至贝塞尔似乎对我来说都很好，所以你可以用这些来近似它们。