我可以在HTML <canvas>元素上关闭抗锯齿吗？

我正在玩元素,绘制线条等.

我注意到我的对角线是抗锯齿的.我更喜欢看到我正在做的事情 - 有什么方法可以关闭这个功能吗？

1> allan..：

---

1-pixel在坐标上绘制线条ctx.lineTo(10.5, 10.5).在点上绘制一条像素线(10, 10)意味着1该位置处的该像素到达时9.5会10.5导致在画布上绘制两条线.

0.5如果你有很多单像素线,并不总是需要将你想要绘制的实际坐标添加到一个很好的技巧,一ctx.translate(0.5, 0.5)开始是你的整个画布.

---

这并没有消除抗锯齿,但确实使抗锯齿线看起来好多了 - 比如当你真正想要一个像素时,摆脱两个像素厚的令人尴尬的水平或垂直线.

2> Kornel..：

---

对于现在的图像.context.imageSmoothingEnabled= false

但是,没有什么能明确控制线条画.您可能需要使用和绘制自己的线条(艰难的方式).getImageDataputImageData

3> 小智..：

---

它可以在Mozilla Firefox中完成.将其添加到您的代码中:

contextXYZ.mozImageSmoothingEnabled = false;

在Opera中,它目前是一个功能请求,但希望它很快就会添加.

---

OP希望取消反别名行,但这仅适用于图像.根据[规范](http://www.w3.org/TR/2dcontext2/#image-smoothing),它确定`"是否填充图案并且drawImage()方法将尝试平滑图像,如果它们的像素不当缩放图像"`时,与显示器完全对齐

4> Izhaki..：

---

它必须antialias矢量图形

正确绘制涉及非整数坐标(0.4,0.4)的矢量图形需要抗锯齿,所有这些坐标都很少.

当给定非整数坐标时,画布有两个选项:

Antialias - 根据整数坐标与非整数坐标的距离(舍入误差)绘制坐标周围的像素.

轮 -应用一些舍入函数应用于所述非整数坐标(1.4,从而将成为1,例如).

后一种策略适用于静态图形,但对于小图形(半径为2的圆),曲线将显示清晰的步骤而不是平滑的曲线.

真正的问题是当图形被平移(移动)时 - 一个像素与另一个像素之间的跳跃(1.6 => 2,1.4 => 1)意味着形状的原点可能相对于父容器跳跃(不断变换) 1像素上/下和左/右).

一些技巧

提示#1:您可以通过缩放画布(例如x)来软化(或硬化)抗锯齿,然后自己将倒数比例(1/x)应用于几何(不使用画布).

比较(无缩放):

with(画布比例:0.75;手动比例:1.33):

和(帆布比例:1.33;手动比例:0.75):

提示#2:如果看起来像是一个锯齿状的外观,请尝试几次绘制每个形状(不擦除).每次绘制时,抗锯齿像素都会变暗.

相比.画完一次后:

画完三次后:

5> raRaRa..：

---

我会使用自定义线算法绘制所有内容,例如Br​​esenham的线算法.看看这个javascript实现:http: //members.chello.at/easyfilter/canvas.html

我认为这肯定会解决你的问题.

---

正是我需要的,我唯一要补充的是你需要实现`setPixel(x,y)`; 我在这里使用了接受的答案:http://stackoverflow.com/questions/4899799/whats-the-best-way-to-set-a-single-pixel-in-an-html5-canvas

6> eri0o..：

---

我想补充一点,我在缩小图像和在画布上绘图时遇到了麻烦,它仍然使用平滑,即使它在升级时没有使用.

我用这个解决了:

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'))

也许这对某人有用.

7> 小智..：

---

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

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

---

您不需要将lineWidth设置为.5 ...将(或应该)仅将其设置为半透明度.