blocks|key|2701250|text|对于较旧的浏览器，您可以用动画制作精灵。创建可能的4个版本的图像，每个移动0.25px从前一个左。将它们粘贴在一个精灵中，然后将背景位置动画化.|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2701251|function+moveClouds(n)
{
++++var+v+=+(n+%25+4)+*+417;
++++var+h+=+Math.ceil(n+/+4);
++++clouds.style.backgroundPosition+=+h+%2B+"+"+%2B+v;
}|code-block|syntax|javascript|2701252|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For older browsers, you could animate a sprite. Create maybe 4 versions of your image, each shifted 0.25px to the left from the previous one. Paste those together in a sprite and then animate the background-position.

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

blocks|key|2701224|text|这是一个已知的Chrome问题，正如http://code.google.com/p/chromium/issues/detail?id=7508所记录的那样|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2701225|仍然没有决心或解决办法。|2701226|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/chromium/issues/detail?id=7508^0|I|1J|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

This is a known Chrome issue as documented at <a href="http://code.google.com/p/chromium/issues/detail?id=7508" rel="nofollow">http://code.google.com/p/chromium/issues/detail?id=7508</a>

still no resolution or workaround for it..

blocks|key|3059358|text|你可以在这里做一个黑客，但它很丑。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3059359|将画布元素的分辨率设置为高于实际显示大小，然后浏览器对翻译进行反别名。达达，亚像素的铬动画！|3059360|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

There is a hack you can do here, but it's pretty ugly. 

You set the resolution of the canvas element to be higher than the actual display size, and then your translations are antialiased by the browser. Tada, sub-pixel animation in chrome!

blocks|key|1504876|text|据我所知。没有做太多的浏览器测试的抗混叠。当drawImage(img1，x，y，宽度，高度)x或y不是整数时，它就开始了。当画布标签width="600“”height="600“大于style=”“宽度:600；高度:600”时，就会启动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504877|将样式设置为1/2画布大小应该会强制反混叠。上次我研究过这个问题。我不认为浏览器会实现100%25的标准。|1504878|注意，绿色筛选的视频，反混叠是重要的，以消除工件。|1504879|更新：在你的例子中，我没有得到反走样使用铬我是与火狐。Win+XP两种浏览器的最新版本。Firefox在你的例子中速度慢得令人痛苦。|offset|length|style|BOLD|1504880|另一个更新设置画布样式大小为画布大小的1/3，画布像素为1个屏幕像素，这似乎可以使子像素呈现工作.但以这种方式实现这一目标可能会带来很大的影响。|1504881|Sub-pixel+canvas+test. 
<canvas+id="canvas"+width="317"+height="351"+
style="border:solid+1px++#000;+width:100px;+height:100px"></canvas>|code-block|syntax|javascript|1504882|抱歉，这不是你真正想要的答案。|1504883|entityMap^0|0|0|0|0|3|0|0|5|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@$H|10|I|11|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@$H|13|I|14|J|K]]|9|@]|A|$]]|$1|N|3|O|5|P|7|15|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

As I understand it ... not done much browser testing of anti-aliasing. It kicks in when drawImage(img1, x,y,width,height) x or y are not integers. And kicks in when the canvas tags width="600" height="600" are larger than the style="width:600; height:600" 

Setting the style to 1/2 the canvas size is suppose to force anti-aliasing. Last time I researched the subject. I would not assume browsers will implement the standard to 100%.

Note for green screening of videos anti-aliasing is important to remove artifacts.

Update: On your example I am not getting the anti-aliasing using chrome I am with firefox.
latest releases of both browsers for Win XP. Firefox fps is painfully slow on your example.

Another Update
Setting canvas style size to 1/3 of the canvas size [3 canvas pixels for 1 screen pixel] does appear to get the sub pixel rendering to work ... but the performance hit may be to big to accomplish it this way.

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

Sorry not the answer you actually wanted.

blocks|key|3059303|text|我尝试了一下您的代码示例，在我看来，较慢的滚动看起来非常平滑：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3059304|ctx.drawImage(img,+left+-=+0.0025,+0,+633,+417);++++|code-block|syntax|javascript|3059305|我使用的浏览器是mac上的铬。|3059306|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I've tried around a bit with your code example and it seems to me that slower scrolling appears very smooth:

<pre><code>ctx.drawImage(img, left -= 0.0025, 0, 633, 417); 
</code></pre>

The browser I use is chrome on a mac.

blocks|key|2701198|text|我测试的所有浏览器都支持画布中的反混叠，只需将图像放在一个非整数的和弦上，就可以看到它的发生。但没有亚像素渲染(为了澄清，即使用LCD排序的红色，绿色，蓝色亚像素，以提高水平分辨率，伟大的文本)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2701199|根据html5的预标准，要由浏览器来决定是否要进行反混叠。|2701200|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

All browsers I test support Anti-Aliasing in the canvas, just put the image on an non integer coords to see it happening. But none subpixel rendering (for clarification, that is using LCDs ordering of red, green, blue subpixels to enhance horizontal resolution, great for text.)

According to the html5 pre-standard, its up to the browser to decide if it wants to do anti-aliasing or not.

Ttl;dr:
I need to move an image VERY slowly in <code>canvas</code> without obvious pixel by pixel movement. I need some sort of anti-aliasing.

<hr>

Recently I was tasked with animating some "cloud" drawings horizontally in a webpage.

Easily enough I just threw the image into the DOM and used CSS3 transforms with a fallback to jQuery animation for browsers that don't support CSS transforms yet.

Everything looked pretty good. I had some clouds moving smoothly moving across the page.

Then I kept getting requests from the designer to slow the movement down...way down.

Because browsers don't do sub-pixel rendering for DOM objects the animation appears to run at 6 FPS.

So, I slap the image into canvas for some quick tests and find out that it doesn't do sub-pixel rendering automatically, either.

<a href="http://jsfiddle.net/ewssM/" rel="nofollow">My quick canvas animation demo</a> (it doesn't accurately time the movements, deal with it. :-p )

Is there a technical reason why canvas's drawImage() doesn't do sub-pixel rendering / antialiasing?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Ttl;dr：，我需要在中缓慢地移动一幅图像，而不需要一个像素一个像素的移动。我需要一些防混叠。。最近，我的任务是在一个网页中水平地动画一些“云”画。很容易，我就将图像放入DOM中，并使用CSS3转换，并将其作为jQuery动画的后盾，用于那些还不支持jQuery转换的浏览器。一切看起来都很好。我看到一些云彩平稳地在页面上移动。然后，我不断收到设计师的请求，要求减缓down...way的移动速度。

问画布的drawImage()不进行亚像素渲染/反别名有技术原因吗？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问画布的drawImage()不进行亚像素渲染/反别名有技术原因吗？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问画布的drawImage()不进行亚像素渲染/反别名有技术原因吗？
EN