javascript - HTML5 画布禁用原始（曲线，...）上的抗锯齿

Question

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

JSFiddle在这里

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唯一影响使用（因此名称为图像SmoothingEnabled）绘制到画布的图像。遗憾的是，没有办法为线条和形状禁用此功能。drawImage()

与 6502 的答案和之前关于 SO 的答案一样，您将需要实施“低级”方法来实现这一点。

以下是各种原语的一些常用算法的一些链接：

• Bresenham 线算法（见这个答案的实现）
• 中点圆算法（和椭圆同理）下面是一个实现。
• 贝塞尔曲线（在 CodeProject 实现）

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

在这两种情况下，由于您需要使用 JavaScript 进行迭代而不是浏览器的内部编译迭代，因此您将有相对巨大的性能下降。

Answer 2

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

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