Javascript canvas'；s drawImage（）不'；不做亚像素渲染/抗锯齿？

Ttl；博士： 我需要在

画布

中非常缓慢地移动图像，而不会出现明显的逐像素移动。我需要某种抗锯齿。

---

最近，我的任务是在一个网页中水平设置一些“云”图形的动画

很简单，我只是将图像放入DOM中，并使用CSS3转换，对于还不支持CSS转换的浏览器，使用jQuery动画

一切看起来都很好。我看到一些云在页面上平稳地移动

然后，我不断收到设计师的请求，要求放慢速度……放慢速度

因为浏览器不为DOM对象进行亚像素渲染，所以动画似乎以6 FPS的速度运行

因此，我将图像放入画布进行一些快速测试，发现它也不会自动进行亚像素渲染

---

（它不能准确地给动作计时，处理它。：-p）

据我所知。。。没有做太多的浏览器抗锯齿测试。当drawImage（img1，x，y，width，height）x或y不是整数时，它将生效。当画布标记width=“600”height=“600”大于style=“width:600；height:600”时，将显示

如果将样式设置为画布大小的1/2，则会强制消除锯齿。上次我研究这个问题。我不认为浏览器会100%地实现这个标准

注：视频的绿色屏蔽消除混叠对于消除瑕疵非常重要

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

另一次更新 将画布样式大小设置为画布大小的1/3[3个画布像素对应1个屏幕像素]似乎可以使子像素渲染正常工作。。。但是，以这种方式完成这项任务，可能会对性能造成巨大影响

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

亚像素画布测试。

---

很抱歉，这不是您真正想要的答案。

我尝试了一下您的代码示例，在我看来，较慢的滚动看起来非常平滑：

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

---

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

我测试的所有浏览器都支持画布中的抗锯齿，只需将图像放在非整数坐标上即可看到它的发生。但是没有亚像素渲染（为了澄清，这是使用LCD对红、绿、蓝亚像素进行排序以提高水平分辨率，非常适合文本。）

---

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

这是一个已知的Chrome问题，见

---

仍然没有分辨率或解决方法。

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

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

---

你可以在这里进行黑客攻击，但它相当丑陋

---

将画布元素的分辨率设置为高于实际显示大小，然后浏览器将消除翻译的锯齿。Tada，chrome中的亚像素动画

你能做一个

ctx.translate（.1*x，0）

之类的吗？在IE9和FF中看起来很棒。不过Chrome不是很好。嗯，我一直在测试Chrome（我想这是最好的）。也许这是webkit的问题？那么，抗锯齿不是与亚像素渲染分离的问题吗？也就是说，亚像素渲染是一种进行抗锯齿或增强抗锯齿的方法，但您可以在不进行亚像素渲染的情况下进行抗锯齿。@Pointy，我不确定这些术语的正确用法……因此，如果您觉得我用错了，请随意编辑我的问题。我认为您的答案是可以的，但我只是想澄清一下。我不是一个真正的渲染专家或什么的，但我已经很老了，我知道当液晶显示器还是科幻小说的时候，人们曾经谈论过屏幕上的抗锯齿图形：-）WindowsXP上的Chrome12仍然口吃，只是慢了10倍。