代码改变世界

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

2010-04-14 22:37 by JimLiu, ... 阅读, ... 评论, 收藏, 编辑

这问题很奇葩,早就想写文章了,听我慢慢说来。以下如无特殊说明,都是在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更完美的表现吧。