Question

的ttl; DR： 我需要在canvas中非常缓慢地移动图像而没有明显的逐像素移动。我需要某种抗锯齿。

最近，我的任务是在网页中水平设置一些“云”绘图。

我只是将图像投入到DOM中，并且使用了CSS3转换，并为不支持CSS转换的浏览器提供了jQuery动画的回退。

一切看起来都不错。我有一些云在页面上移动得很顺利。

然后我不停地收到设计师的请求，以减慢运动......向下走。

由于浏览器不对DOM对象进行子像素渲染，因此动画似乎以6 FPS运行。

因此，我将图像拍到画布上进行一些快速测试，并发现它不会自动进行子像素渲染。

My quick canvas animation demo （它没有准确计算动作的时间，处理它。： - p）

Answer 1

对于旧版浏览器，您可以为精灵设置动画。创建您的图像的4个版本，每个版本从前一个版本向左移动0.25px。将它们粘贴在一个精灵中，然后为背景位置设置动画。

function moveClouds(n)
{
    var v = (n % 4) * 417;
    var h = Math.ceil(n / 4);
    clouds.style.backgroundPosition = h + " " + v;
}

Answer 2

中记载的已知Chrome问题

仍然没有决议或解决方法..

Answer 3

你可以在这里做一个黑客，但它非常难看。

您将canvas元素的分辨率设置为高于实际显示大小，然后浏览器会对您的翻译进行抗锯齿处理。 Tada，chrome中的子像素动画！

Answer 4

据我所知...没有做太多浏览器测试抗锯齿。当drawImage（img1，x，y，width，height）x或y不是整数时，它会启动。当canvas标签width =“600”height =“600”大于style =“width：600; height：600”

时踢出

将样式设置为画布大小的1/2是为了强制消除锯齿。上次我研究过这个主题。我不认为浏览器会将标准实现为100％。

对视频进行绿色筛选的注意事项抗锯齿对于消除伪影很重要。

更新：在您的示例中，我没有使用chrome获取抗锯齿功能我使用的是Firefox。适用于Win XP的两种浏览器的最新版本。在您的示例中，Firefox fps非常缓慢。

另一次更新 将画布样式大小设置为画布大小的1/3 [1个画面像素的3个画布像素]似乎确实使子像素渲染起作用......但是通过这种方式可以达到很高的性能。

Sub-pixel canvas test.<br/>
<canvas id="canvas" width="317" height="351" 
style="border:solid 1px  #000; width:100px; height:100px"></canvas>

对不起你真正想要的答案。

Answer 5

我已经尝试了一些代码示例，在我看来，较慢的滚动显得非常流畅：

ctx.drawImage(img, left -= 0.0025, 0, 633, 417);

我使用的浏览器是mac上的chrome。

Answer 6

我测试的所有浏览器都支持画布中的抗锯齿，只需将图像放在非整数坐标上即可。但没有子像素渲染（为了澄清，使用LCD排序的红色，绿色，蓝色子像素来增强水平分辨率，非常适合文本。）

根据html5预标准，它由浏览器决定是否要进行抗锯齿。