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( );

- Maël Nison

---

这个问题让我想起了我曾经回答过的这个问题：https://dev59.com/923Xa4cB1Zd3GeqPem42#14429346。简言之，虽然有一定的性能损耗，你可以在绘图后进行后处理或者重新实现那些没有抗锯齿功能的原语元素（可能需要花费很多工作），但是如果不使用抗锯齿功能，就没有更快的方法来完成。 - GameAlchemist

当我在编写绘图脚本时，我发现如果你重复绘制同一物体20次，抗锯齿像素会堆叠成锯齿状。更快的方法是在图像缓冲区上绘制所需形状，通过读取数据夹紧alpha值（0％或100％），然后将图像缓冲区绘制到画布中。（我没有时间编写代码） - Ming-Tang

请在此处查看我的“复古画布”项目：https://github.com/epistemex/retro-context-canvas（它是免费的） - user1693593

那个链接现在是https://github.com/epistemex/8-bit（还有这个：https://github.com/mohayonao/gretro） - 1j01

Answer 1

imageSmoothingEnabled只影响使用drawImage()在画布上绘制的图像（因此称为imageSmoothingEnabled）。不幸的是，没有办法禁用线条和形状的平滑处理。

与6502的答案和之前在SO上的答案一样，您需要实现“低级”方法才能实现这一点。

以下是各种基元的常见算法链接：

• Bresenham线算法（请参阅此答案以获取实现）
• Midpoint圆算法（以及相同的椭圆）这里有一个实现。
• Bezier曲线（CodeProject上的实现）

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

在两种情况下，您都会有相对较大的性能降低，因为您需要使用JavaScript进行迭代，而不是浏览器的内部编译迭代。

- user1693593

---

关于“reduction”，OpenGL受到影响吗？性能是否仍然受到惩罚？ - Pacerier

@Pacerier 这里与OpenGL无关，您是指WebGL吗？您可以使用着色器在WebGL中实现解决方案。 - user1693593

Answer 2

很遗憾，在画布上绘制时，没有可移植的方法可以禁用抗锯齿。

我找到的唯一解决方案是重新实现图形原语，直接编写图像数据。

- 6502