如何撤消画布抗锯齿？
[英]How to undo canvas antialiasing?
问题描述
我绘制了一些矩形，然后擦除并重新绘制它们以模拟向右移动。 但是，画布抗锯齿会使它们留下痕迹，并且我不想重绘整个画布。 这就是我在说的
这是该代码：
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);
到目前为止，我试图清除一个比我要绘制的矩形更大的矩形，但这似乎不起作用。
3 个解决方案
解决方案1
2
显示的代码没有错。 fillRect()和clearRect()不需要偏移以避免被抗锯齿。
该问题表明该程序的较早版本已应用偏移，或者浏览器当前存在问题。
在运行循环之前，请确保已重置转换：
ctx.setTransform(1,0,0,1,0,0); // identity matrix
// start loop
如果仍然遇到问题，则应将此错误报告给Chromium / Mozilla，但如下所示，在较新的版本中这不是问题。 您还可以考虑在每个方向上清除边界框+1像素，或者清除整个画布并重新绘制。
这是屏幕记录结果（单击图像可查看100％）-
从Firefox（v47.0b9） ：
从Chrome（v52 Canary） ：
无路可走（ 测试的小提琴 ）
解决方案2
1 2016-05-31 21:33:17
解决方法如下：
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.5); // boop
<canvas id="canvas"></canvas>
将矩形偏移0.5px 。
解决方案3
0 2016-05-31 21:39:26
不幸的是，在画布上绘图时，没有便携式方法可以关闭抗锯齿功能。 例如，如果您要绘制两个共享一条边的半透明多边形，因为边界像素将无法正确处理（在按图元的基础上工作，则无法正确进行抗锯齿...完全正确），这可能会产生问题。一般情况下，抗锯齿需要全场景处理）。
但是，如果只需要绘制矩形，则可以通过使用坐标来获得像素精确的结果，例如，当使用大小为1px的笔进行绘制时，坐标为int + 0.5 。
使用fillRect坐标绘制填充矩形时，无需进行调整：
<!DOCTYPE html> <html> <body> <canvas id="canvas"></canvas> <script> var x = 0; setInterval(function() { 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); </script> </body> </html>
另一种选择是仅使用多个重叠的画布进行动画处理，而不是在单个画布上进行绘制/擦除（默认情况下，画布像素是透明的，并且画布上的每个基本抗锯齿可以正确更新边缘的透明度）。
奇怪的HTML 5 Canvas Antialiasing
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.