我可以关闭 HTML<canvas> 上的抗锯齿功能元件？

问题描述

我正在玩<canvas> 元素，绘制线等。

我注意到我的对角线是抗锯齿的。我喜欢看起来像我在做什么 – 有没有办法关闭这个功能？

最佳解决方案

对于图像，现在有 context.imageSmoothingEnabled = false 。

但是，没有任何明确的控制线条图。您可能需要使用 getImageData 和 putImageData 绘制自己的线 (the hard way) 。

次佳解决方案

在 ctx.lineTo(10.5, 10.5)坐标上绘制 1-pixel 线。在 (10, 10)点绘制 one-pixel 线，意味着该位置的 1 像素从 9.5 到 10.5，这样可以在画布上绘制两条线。

一个很好的技巧，不总是需要将 0.5 添加到您想要绘制的实际坐标，如果你有很多 one-pixel 线，就是 ctx.translate(0.5, 0.5)你的整个画布在开始。

第三种解决方案

可以在 Mozilla Firefox 中完成。将其添加到您的代码中：

contextXYZ.mozImageSmoothingEnabled = false;

在 Opera 中，它目前是一个功能请求，但希望很快添加。

第四种方案

我想补充说，当缩小图像尺寸并在画布上绘制时，我遇到了麻烦，它仍然使用平滑，即使在升序时不使用它。

我解决了这个：

function setpixelated(context){
    context['imageSmoothingEnabled'] = false;       /* standard */
    context['mozImageSmoothingEnabled'] = false;    /* Firefox */
    context['oImageSmoothingEnabled'] = false;      /* Opera */
    context['webkitImageSmoothingEnabled'] = false; /* Safari */
    context['msImageSmoothingEnabled'] = false;     /* IE */
}

你可以使用这样的功能：

var canvas = document.getElementById('mycanvas')
setpixelated(canvas.getContext('2d'))

也许这对某人有用

第五种方案

它必须反对矢量图形

对于正确绘制涉及 non-integer 坐标 (0.4,0.4) 的矢量图形，需要进行抗锯齿，所有这些坐标除了极少的客户端都能做。

当给出 non-integer 坐标时，画布有两个选项：

Antialias – 绘制坐标周围的像素相对于 non-integer 一个整数坐标的距离 (舍入误差) 。
回合 – 将一些舍入函数应用于 non-integer 坐标 (例如，1.4 将变为 1) 。

后来的策略将适用于静态图形，虽然对于小图形 (半径为 2 的圆) 曲线将显示清晰的步骤，而不是平滑曲线。

真正的问题是当图形被翻译 (移动) 时 – 一个像素与另一个像素之间的跳跃 (1.6 => 2，1.4 => 1) 意味着形状的原点可能会相对于父容器不断地向上/向下移动 1 个像素，左/右) 。

一些技巧

提示＃1：您可以通过缩放画布 (通过 x 表示) 来软化 (或硬化) 抗锯齿，然后将自变量 (1 /x) 应用于几何图形 (不使用画布) 。

比较 (无缩放)：

与 (画布尺度：0.75; 手动刻度：1.33)：

和 (画布比例：1.33; 手动刻度：0.75)：

提示＃2：如果一个锯齿状的外观真的是你以后，尝试绘制每个形状几次 (不擦除) 。每个画面，抗锯齿像素变暗。

比较。绘制一次后：

画三次后：

第六种方案

我将使用 Bresenham 线算法的自定义线算法绘制所有内容。查看这个 javascript 实现：http://members.chello.at/easyfilter/canvas.html

我想这肯定会解决你的问题。

第七种方案

ctx.translate(0.5, 0.5);
ctx.lineWidth = .5;

有了这个组合，我可以画出漂亮的 1px 细线。

参考文献

Can I turn off antialiasing on an HTML <canvas> element?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

我可以关闭 HTML<canvas> 上的抗锯齿功能元件？