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等）一般，所以有點確定什麼條款我甚至應該谷歌搜索 - 所以請溫柔，如果你有任何明顯的解決方案。

Answer 1

我相信你看到的是aliasing artefact。曲線覆蓋不到一個像素，並且由於某種原因，光柵化可能完全錯過其中一些像素。這在繪製二次曲線時似乎很明顯，而線條甚至貝塞爾似乎對我來說工作得很好，所以您可以用這些曲線來逼近它們。