Question

我正在使用HTML5开发游戏，我必须将画布的内容传输到ImageElement。以下飞镖码有效

img.src = _canvas.toDataUrl();
img.width = w;
img.height = w;

但速度非常慢，每次耗时约120毫秒！游戏必须不惜一切代价保持60 fps，而操作必须保持120 ms，因为这太贵了。我怎么能这么快地做到这一点？

注意：我在Dart中编程，但是Javascript很好地转换为Dart，所以我不介意javascript答案

由于

Answer 1

只需使用另一个canvas元素。除非您有特定的理由使用图像元素，否则两者相似，可以互换。

var img = document.getElementById("cImg");
img.ctx = img.getContext("2d");
img.getImg = function(source,w,h){   // close over img
    img.style.width = w + "px";  // will change resolution 
    img.style.height = h + "px"; 
    img.width = w;   // if you only set these two resolution will remain constant
    img.height = h;  // only the display size will change. If you do you will 
                     // have to copy to the resolution size not the display size.
    img.ctx.drawImage(source, 0, 0, w, h);
};

然后，一帧60fps只需拨打img.getImg

img.getImg(_canvas, w, h);

速度非常快（你几乎不会注意到它），外表看起来像是一个图像。

需要非常快速地将画布的内容设置为图像

1 个答案: