"HTML5 畫布禁用原始（曲線，...）上的抗鋸齒"

Question

如何在以下代碼中禁用抗鋸齒效果？ 我正在使用 Chrome 29。

JSFiddle在這里<\/a><\/strong>

var canvas = document.getElementById( 'test' );
var context = canvas.getContext( '2d' );

// These lines don't change anything
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

context.beginPath();
context.arc(100, 100, 100, 0, Math.PI * 2, true );
context.closePath();

context.fillStyle = 'red';
context.fill( );

Answer 1

所述imageSmoothingEnabled只影響使用吸引到畫布圖像 drawImage()因此命名圖像 SmoothingEnabled）。 遺憾的是，沒有辦法禁用線條和形狀。

與6502的答案以及之前的答案一樣，您需要實現“低級”方法來實現這一目標。

以下是一些針對各種基元的常用算法的鏈接：

• Bresenham線算法 （ 參見本答案實施 ）
• 中點圓算法 （和橢圓相同 ） 這是一個實現 。
• Bezier曲線 （ 在CodeProject上實現 ）

您需要實現此方法的方法是從這些公式中獲取x和y坐標。 然后你需要使用rect(x, y, 1, 1)或直接通過改變圖像數據緩沖區來設置像素。 對於這類事情，后者往往更快。

在這兩種情況下，由於需要使用JavaScript與瀏覽器的內部編譯迭代進行迭代，因此性能會相對較高。

Answer 2

不幸的是，在畫布上繪制時沒有可移植的方法來禁用抗鋸齒。

我找到的唯一解決方案是重新實現直接在圖像數據上書寫的圖形基元。

Answer 3

這是你要找的嗎？ <canvas style="image-rendering: pixelated"><\/code>

"