javascript - requestAnimationFrame - 浏览器支持问题

Question

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

似乎在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);

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

任何人都可以启发我吗？

干杯

score 0 · Accepted Answer

我猜你现在已经弄清楚了，但是对于其他可能感兴趣的人来说，原因是这段代码试图获取窗口大小：

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/

1 回答 1