我正试图找出一种方法来绘制从Facebook和JSON数据对象中提取的几个图像,一旦我得到它们并且在显示它们之前做我需要做的事情就变得非常复杂。 / p>
图片是个人资料图片,需要使用ctx.clip()裁剪以使其成为圆圈,然后在顶部绘制一个戒指,使其根据朋友的类型或w / e具有不同的颜色边框。这一切都设置好了。我正在使用它来创建数据和fb图片的可视化,我们拉动http://thejit.org,并在正确加载时为视觉设置动画。因此,当这些圆形图片被绘制到画布上时,有500次调用ctx.drawImage()并且它是愚蠢的。需要做的是获取数据,创建临时画布和ctx,将每个图像绘制到它们,然后将这些画布绘制到主画布,然后运行动画。
有意义吗?
关于如何做到这一点的任何提示或想法?
答案 0 :(得分:2)
我认为您所描述的内容已在本文档的预渲染到屏幕外画布部分中介绍:http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-pre-render
您可以将画布传递给canvas.drawImage()
函数。这允许您使用document.createElement("canvas")
创建离屏画布,执行一些绘制操作,然后将该画布的图像内容写入主(屏幕)画布。
答案 1 :(得分:0)
我发现这里的问题很可能是由于facebook的速度缓慢以及firefox版本6及更低版本连接所需的时间长,以及返回所需的数据,我的案例档案图片。
我也为我要求的每个图片返回这个,仅在firefox idk为什么,但似乎与安全连接的东西和黑客等等,图像,脸书。等等...
graph.facebook.com:服务器不支持RFC 5746,请参阅CVE-2009-3555
Net firebug选项卡显示请求的每个图像需要4.0 - 4.12秒才能连接并返回。那是迟钝的...... Srsly?什么是出于这个原因,facebook很糟糕,或者其他什么。当它们是动态的东西时,从其他网站请求图像并不是那么慢。 blargghh!
我曾经做过一次设法做出一些疯狂的疯狂调整黑客的东西,以某种方式使它工作,但我不知道它是什么,并且必须解开它因为它不再工作...... :( < / p>