javascript - requestAnimationFrame - 浏览器支持问题

Question

http://jsfiddle.net/xwF6E/14/

上面是我正在尝试创建的动画的 JSfiddle。它在 Chrome 中 100% 正常工作，但在其他浏览器中存在各种问题。

似乎在 firefox 中它不呈现动画。根据 Mozilla 开发网络文档 @ https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame ，我相信我已经添加了跨浏览器支持，但也许我做错了什么。

在 IE(至少 8 + 10)中，它不渲染动画，也不渲染我的径向渐变(如果有人可以提供帮助，这也是一个附带问题)。

IE 在这行代码上给我一个 IndexSizeError 错误

var imageData = context.createImageData(context.canvas.width, context.canvas.height);

但我不确定这具体意味着什么，而且我找不到关于那个错误/那个方法的太多信息。

请问哪位高人能指教一下？

干杯

Answer 1

我猜你现在已经明白了，但对于任何可能感兴趣的人来说，原因是这段代码试图获取窗口大小:

context.canvas.width = document.width;
context.canvas.height = document.height;

你会想要做更多像这样的事情:

context.canvas.width = document.body.clientWidth;
context.canvas.height = document.body.clientHeight;

尽管实际上可能比这复杂一点。有关查找窗口高度和宽度的更多信息，请参阅此内容: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

这是修改后的 fiddle :http://jsfiddle.net/shaunwest/MALN2/