Jquery 使用缓冲区don'；中的drawImage更新画布；t使用drawImage应用操作

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

这是我的代码：

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);

var ctx=$（'#canvas'）[0].getContext（“2d”），
宽度=$（“#画布”）.width（），
高度=$（“#画布”）.height（），
缓冲区=$（“”）[0].getContext（“2d”）；
ctx.canvas.width=宽度；
ctx.canvas.height=高度；
buffer.canvas.width=宽度；
buffer.canvas.height=高度；
var image=新图像（）；
image.src=“img/logo.png”；
$（图像）.load（函数（）{
drawImage（图像，0，0）；
});
ctx.drawImage（buffer.canvas，0,0）；

它不工作，因为正在发生以下事件：

您正在为常规画布绘制一个空缓冲区

然后加载一个图像

然后在缓冲区上绘制图像。您现在有了带有图像的缓冲区，但它永远不会被绘制到常规画布上

如果将

ctx.drawImage

行放在onload的内部：

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

它会像你想要的那样工作