jquery - 使用缓冲区中的 drawImage 更新 Canvas 不要使用 drawImage 应用操作

Question

我使用缓冲方法更新 Canvas ，问题是当我在缓冲 Canvas 中绘制图像并将其应用于真实 Canvas 时，真实 Canvas 上没有图像。但我可以将任何其他东西应用到真正的 Canvas 上。

这是我的代码:

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. 您正在为常规 Canvas 绘制一个空缓冲区。
2. 然后图片加载完成。
3. 然后在缓冲区中绘制图像。您现在有了带图像的缓冲区，但它永远不会被绘制到常规 Canvas 上。

如果将 ctx.drawImage 行放在 onload 中:

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

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