HTML5画布禁用基元上的抗锯齿（曲线，...）

Question

如何在以下代码中禁用抗锯齿效果？我正在使用Chrome 29。

JSFiddle here

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 line algorithm（see this answer for implementation）
• Midpoint circle algorithm（和ellipse with the same）Here's an implementation。
• Bezier curve（implementation at CodeProject）

您需要实现此方法的方法是从这些公式中获取x和y坐标。然后，您需要使用rect(x, y, 1, 1)或直接通过更改图像数据缓冲区来设置像素。对于这类事情，后者往往更快。

在这两种情况下，由于需要使用JavaScript与浏览器的内部编译迭代进行迭代，因此性能会相对较低。

Answer 2

不幸的是，在画布上绘图时没有可移植的方法来禁用抗锯齿。

我找到的唯一解决方案是重新实现直接在图像数据上书写的图形基元。