有没有技术上的原因,为什么canvas的drawImage()不进行子像素渲染/抗锯齿？

Question

Ttl; dr: 我需要非常缓慢地移动图像canvas而没有明显的逐像素移动.我需要某种抗锯齿.

---

最近我的任务是在网页中水平设置一些"云"绘图.

很简单,我只是将图像投入到DOM中,并使用CSS3转换以及对不支持CSS转换的浏览器的jQuery动画的回退.

一切看起来都不错.我有一些云在页面上移动顺畅.

然后我不断收到设计师的请求,以减慢运动速度.

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

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

我的快速画布动画演示 (它没有准确计算动作的时间,处理它.:-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;
}