requestAnimationFrame - 浏览器支持问题

Question

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

上面是我试图创建的动画的JSfiddle。它在Chrome中的效果非常好，但在其他浏览器中存在各种问题。

似乎在Firefox中它不呈现动画。根据Mozilla Dev Network docs @ 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

这是修改过的小提琴：http://jsfiddle.net/shaunwest/MALN2/