HTML5画布的Android像素化答案

【问题标题】：Android pixelation of HTML5 canvasHTML5画布的Android像素化
【发布时间】：2016-07-26 16:45:51
【问题描述】：

我在使用 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 等）不太熟悉，所以我什至应该在谷歌上搜索什么术语——所以如果你有任何明显的解决方案，请保持温和。

【问题讨论】：

标签： android canvas rendering

【解决方案1】：

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

【讨论】：