使用缓冲区中的drawImage进行画布更新不会对drawImage应用操作

Question

我使用缓冲方法更新画布，当我在缓冲区画布中绘制图像并将其应用到真实画布时，真实画布上没有图像。但我可以在真实画布上应用任何其他东西。

这是我的代码：

var ctx = $('#canvas')[0].getContext("2d"),
    width  = $("#canvas").width(),
    height = $("#canvas").height(),
    buffer = $("<canvas>")[0].getContext("2d");
ctx.canvas.width = width;
ctx.canvas.height = height;
buffer.canvas.width = width;
buffer.canvas.height = height;
var image = new Image();
image.src = "img/logo.png";
$(image).load(function() {
    buffer.drawImage(image, 0, 0);
});
ctx.drawImage(buffer.canvas, 0, 0);

Answer 1

由于发生了这些事件，因此无效：

1. 您正在为常规画布绘制一个空缓冲区。
2. 然后加载图片。
3. 然后在缓冲区上绘制图像。您现在拥有缓冲区图像，但永远不会被绘制到常规画布。

如果你将ctx.drawImage行放在onload中：

$(image).load(function() {
    buffer.drawImage(image, 0, 0);
    ctx.drawImage(buffer.canvas, 0, 0);
});

它会像你想要的那样工作。