代码改变世界

Chromium的Canvas实现中PixelManipulate有bug...吗?

  JimLiu  阅读(785)  评论(0编辑  收藏  举报

这问题很奇葩,早就想写文章了,听我慢慢说来。以下如无特殊说明,都是在Chrome里的结果。

Canvas的getContext('2d')方法可以获得Context2D,很爽,可以用来绘图,速度相当相当理想。

但是在对我的JavaScript版《Bad Apple》的进一步优化中,我们用Canvas发现速度还是就这么地,虽然的的确确比用成千上万个span来做好多了。

所以我需要更高的Canvas操作方法,最好是直接访问图片的字节数组,最好最好是直接访问和输出区域共享的内存!

幸运的是W3C为Context2D提供了getImageData方法,可以直接得到一个RGBA字节数组,自己访问完了以后又putImageData回去。这样速度就能达到极限了,没别的运算压力下,对整个Canvas随机赋色随随便便就能跑100多帧。配合上后来的LZW逐帧解压算法,再结合个<audio>放音乐,可以做到480*360分辨率下音画同步15fps,怎一个爽子了得!?

可惜,在Chrome4.0还是Dev的时候,我就用它来尝试了,很好很强大,就是他的GC似乎非常激进,几秒钟就卡一次,回收很多很多内存。这让人无法忍受。还有一个问题就是用这种方法来绘制图像会出现画面错位的现象,也就是我本文想说的。

幸好在Chrome4.0的正式版中,这个错位的问题解决了,可是GC卡住画面的问题已然没能解决。难道最强的浏览器也不足以征服《Bad Apple》吗!!!

非也!Chrome5.0Dev犹如救世主一般从天而降,这次他的GC改得非常平稳,整个播放过程中不仅帧率稳定,不丢帧,而且也不会出现4.0中大幅度GC停住不动的情况。可惜传说中的画面错位又出现了,我不知道这个问题是从哪来的,应该不是BMP的Stride问题,因为颜色是RGBA的,生来就是4的倍数。

估计过不了多久Chrome5的正式版就要发布了,期待那就是HTML5版的《Bad Apple》能够完美播放的一天。

P.S.Firefox 3.6+可以播放320*240*15fps音画同步版,完美。但是对于480*360的无力,只能放到7.x帧,Firefox3.7也提升不大。

Safari不支持audio,480分辨率fps也达不到15。

自我感觉良好号称地球上最快的Opera呢?我的动态脚本加载在Chrome/Firefox/Safari里都能用,惟独在Opera里戏剧性的罢工了。改成不动态加载的,好嘛,加载速度还挺快,比Chrome快多了。还真能放!音画同步,速度也能达到15fps。不过Ogg爆音,用了700M内存(Chrome200M),而且声音还会卡。看来Opera不过如此。

我只能说期待下一版Chrome更完美的表现吧。

编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述
历史上的今天:
2009-04-14 2009.04.14再次发现校内网一漏洞
点击右上角即可分享
微信分享提示