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

【问题标题】：HTML5 canvas disable antialias on primitive (curves, ...)HTML5 画布禁用原始（曲线，...）上的抗锯齿
【发布时间】：2013-08-31 18:41:22
【问题描述】：

如何在以下代码中禁用抗锯齿效果？我正在使用 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( );

【问题讨论】：

这个问题让我想到了这个问题，我回答了这个问题：stackoverflow.com/questions/14424648/nice-ellipse-on-a-canvas/… 简而言之：性能受到很大影响，您可以对绘图进行后处理或重新实现原语，而无需抗锯齿（可能需要相当多的工作），但没有抗锯齿就无法快速完成。
当我在做一个绘图脚本时，我发现如果你画同样的东西 20 次，抗锯齿的像素会堆积起来变成锯齿。更快的方法是在图像缓冲区上绘制所需的形状，通过读取数据来限制 alpha（0% 或 100%），然后将图像缓冲区绘制到画布中。（我没时间写代码）
请在此处查看我的“复古画布”项目：github.com/epistemex/retro-context-canvas（免费）
那个链接现在是github.com/epistemex/8-bit（还有这个：github.com/mohayonao/gretro）

标签： javascript html canvas html5-canvas

【解决方案1】：

imageSmoothingEnabled 仅影响使用drawImage() 绘制到画布上的图像（因此名称为 imageSmoothingEnabled）。遗憾的是，无法为线条和形状禁用此功能。

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

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

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

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

【讨论】：

重新“还原”，OpenGL呢？表现还受到惩罚吗？
@Pacerier OpenGL 在这里不相关.. 你的意思是 WebGL 吗？您可以使用着色器在 WebGL 中实现解决方案。

【解决方案2】：

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

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

【讨论】：