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仅影响图像绘制用帆布drawImage()(故名图像 SmoothingEnabled).遗憾的是,没有办法禁用线条和形状.

与6502的答案以及之前的答案一样,您需要实现"低级"方法来实现这一目标.

以下是一些针对各种基元的常用算法的链接:

• Bresenham线算法(参见本答案实施)
• 中点圆算法(和椭圆相同)这是一个实现.
• Bezier曲线(在CodeProject上实现)

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

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