jquery - 使用缓冲区中的 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);
});

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