如何缓冲html5画布的图形

Question

我正在开发一款开始变得非常图形密集的游戏.需要绘制许多点,弧和渐变.问题是绘制所有这些图形开始变慢.当绘制在其他渐变的顶部(即,用于背景)时,RGBA径向渐变似乎需要非常长的时间来绘制.

如果有某种方法来缓冲图形,那么每帧可以节省很多计算量.根据这个问题,可以通过在html文档上创建隐藏的html5画布来完成图形缓冲.不幸的是,这不起作用,因为我需要能够为游戏缓冲未定义数量的图形.

有没有办法缓冲html5画布的图形？

Answer 1

来自http://kaioa.com/node/103

var renderToCanvas = function (width, height, renderFunction) {
    var buffer = document.createElement('canvas');
    buffer.width = width;
    buffer.height = height;
    renderFunction(buffer.getContext('2d'));
    return buffer;
};