画布的drawImage（）不执行亚像素渲染/抗锯齿的技术原因是吗？

| Ttl; dr：我需要在canvas中非常缓慢地移动图像，而没有明显的逐像素移动。我需要某种抗锯齿功能。最近，我的任务是在网页中水平绘制一些“云”图形的动画。足够容易的是，我只是将图像放入DOM中，并使用CSS3转换和对jQuery动画的后备支持，用于尚不支持CSS转换的浏览器。一切看起来都不错。我的云层在页面上平滑移动。然后，我不断收到设计师的要求，以减慢运动速度。由于浏览器不对DOM对象进行亚像素渲染，因此动画似乎以6 FPS的速度运行。因此，我将图像拍到画布上进行一些快速测试，发现它也不会自动进行亚像素渲染。我的快速画布动画演示（它无法准确计时运动的时间，请处理它。:-p）

已邀请:

6 个回复

瓜唱鬼

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

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

戊袱

如http://code.google.com/p/chromium/issues/detail?id=7508所述，这是一个已知的Chrome问题。仍然没有解决方案或解决方法。

祁澈盘哼颗

您可以在此处进行修改，但是非常难看。您将canvas元素的分辨率设置为高于实际显示大小，然后您的翻译将被浏览器抗锯齿。 Tada，镀铬亚像素动画！

剃摧庭峨僳

我已经对您的代码示例进行了一些尝试，在我看来，缓慢的滚动看起来非常流畅：

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

我使用的浏览器是Mac上的Chrome浏览器。

厘恼轨

据我了解...没有做太多的浏览器抗锯齿测试。当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 [1个屏幕像素需要3个画布像素]确实可以使子像素渲染正常工作...但是以这种方式实现效果可能会很大。

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

抱歉，您实际上没有想要的答案。

揽芳僵迷仇

我测试的所有浏览器都在画布中支持抗锯齿功能，只需将图像放在非整数坐标上即可查看情况。但是没有子像素渲染（为清楚起见，即使用LCD对红色，绿色，蓝色子像素进行排序以增强水平分辨率，这对于文本来说非常有用。）根据html5预标准，由浏览器决定是否要进行抗锯齿。

要回复问题请先登录或注册

画布的drawImage（）不执行亚像素渲染/抗锯齿的技术原因是吗？

6 个回复

发起人

antialiasing

html

canvas

javascript

animation

问题状态

画布的drawImage（）不执行亚像素渲染/抗锯齿的技术原因是吗？

与内容相关的链接

6 个回复

发起人

antialiasing

html

canvas

javascript

animation

问题状态