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

它将按照您想要的方式工作。