Javascript 如何撤消画布抗锯齿？

我画了一些矩形，然后擦除并重新绘制它们来模拟运动 向右。但是，画布抗锯齿使它们留下痕迹，我不想重新绘制整个画布。

下面是代码：

var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
maxFps = 15;


function loop(x) {
    setTimeout(function() {
        undoRect(x);
        drawRect(x + 30);   
        loop(x + 30);
    }, 1000/maxFps);
};


function undoRect(x) {
    context.clearRect(x, 0, 30, 30);
};


function drawRect(x) {
    context.fillStyle = 'black';
    context.fillRect(x, 0, 30, 30);
};

loop(0);

到目前为止，我试图清除一个比我正在绘制的更大的矩形，但这似乎不起作用。

以下是修复方法：

var canvas=document.getElementById（“canvas”）；
画布宽度=800；
帆布高度=600；
var context=canvas.getContext（“2d”）；
maxFps=15；
函数循环（x）{
setTimeout（函数（）{
撤消直接（x）；
drawRect（x+30）；
环（x+30）；
}，1000/最大每秒）；
};
函数undoRect（x）{
clearRect（x，0，30，30）；
};
函数drawRect（x）{
context.fillStyle='black'；
fillRect（x，0，30，30）；
};
循环（0.5）；//boop

---

不幸的是，在画布上绘制时，没有可移植的方法来关闭抗锯齿。这可能会产生问题，例如，如果要绘制共享一条边的两个半透明多边形，因为边界像素将无法正确处理（在每个基本体的基础上工作时，无法正确进行抗锯齿处理…在一般情况下，完全正确的抗锯齿需要完整的场景处理）

但是，如果只需要绘制矩形，则可以使用坐标获得像素精度的结果，例如，当使用1px大小的笔绘制时，坐标为

int+0.5

使用

fillRect

坐标绘制填充矩形时，无需调整：

var x=0；
setInterval（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.clearRect（x，0，30，30）；
x+=10；
ctx.fillStyle=“#F00”；
ctx.fillRect（x，0，30，30）；
}, 100);

显示的代码没有问题

fillRect（）

和

clearRect（）

不需要偏移以避免抗锯齿

该问题表示在程序的早期应用了偏移，或浏览器存在当前问题

在运行循环之前，确保已重置转换：

ctx.setTransform(1,0,0,1,0,0);   // identity matrix
// start loop

如果您仍然遇到问题，那么您应该将其作为错误报告给Chromium/Mozilla，但是如下所示，这在较新版本中不是问题。您还可以考虑清除边界框+ 1个像素的每个方向，可选地，清晰的整个画布和重绘。 以下是屏幕记录结果（点击图片查看100%）-

从Firefox（v47.0b9）开始：

从铬合金（v52金丝雀）：

---

没有痕迹（）

@超异种学对我有效。你在用什么浏览器？Chrome。“它也会在Firefox上留下痕迹。”帕特里克·罗伯特的回答使用了0.5技巧，但似乎不起作用。你对此有什么解释吗？当用1px的钢笔画水平线或垂直线时，需要+0.5

fillRect

不需要调整。我并没有尝试过你们的代码，但从快速阅读的角度来看，你们似乎刚刚清楚你们在最后一帧中画的地方。为什么不清除整个画布？@Kaido，有时候画布教程过分强调清除画布中最小“脏”部分的性能优势。@markE，因为清除整个画布并不意味着（那么多）抗锯齿计算，我想知道是否有任何性能优势，我不确定我们是否应该让提问者在这里遵循这样的方式，我的意思是，大多数教程都是由那些读了这么多问答的人写的；-）@Kaido，你的观点正是我所暗示的，所以我要明确地说：大多数时候（在这里的超外星学案例中），清理和重画场景是更好的选择。涉及数千个图形的场景或涉及昂贵过滤（例如分层图像过滤器）的场景可能会受益于仅清除画布的脏部分。：-）