是否有技术原因导致画布的drawImage()不进行子像素渲染/抗锯齿？

Question

Ttl；博士： 我需要在canvas中非常缓慢地移动图像，而没有明显的逐像素移动。我需要某种抗锯齿功能。

---

最近，我的任务是在网页中水平制作一些“云”绘图的动画。

我很轻松地将图像放入 DOM 中，并使用 CSS3 转换，并为尚不支持 CSS 转换的浏览器回退到 jQuery 动画。

一切看起来都不错。我有一些云在页面上平稳地移动。

然后我不断收到设计师的要求，要求减慢运动速度……减慢速度。

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

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

我的快速画布动画演示 （它不能准确地计算运动时间，请处理它。:- p)

Answer 1

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

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

Answer 2

这是一个已知的 Chrome 问题，如 http://code.google 中所述。 com/p/chromium/issues/detail?id=7508

仍然没有解决方案或解决方法。

Answer 3

你可以在这里做一个 hack，但它非常丑陋。

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

Answer 4

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

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

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

Answer 5

据我了解...没有进行太多的抗锯齿浏览器测试。当 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>

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

Answer 6

我测试的所有浏览器都支持画布中的抗锯齿功能，只需将图像放在非整数坐标上即可看到它的发生。但没有子像素渲染（澄清一下，即使用 LCD 的红、绿、蓝子像素排序来增强水平分辨率，这对文本来说非常有用。）

根据 html5 预标准，由浏览器决定是否要这样做是否抗锯齿。