Question

我有画布：

<canvas id="mandarin" width="235" height="300" style="border:1px solid #000000;"></canvas>

我希望在窗口加载时将图像插入到画布中，但是此代码不会呈现任何内容：

window.onload = function() {
    var context = document.getElementById("mandarin").getContext("2d");
    var ourImage = document.createElement("IMG");
    ourImage.src = "mandarin.jpg";
    ourImage.setAttribute("width", 235);
    ourImage.setAttribute("height", 300);
    context.drawImage(ourImage, 10, 10);
};

但是当我包含这一行时，它与上面和外面的代码无关。

<img id="mandarinImg" src="mandarin.jpg" alt="The Scream" width="250" height="350">

但问题是我的画布和图像并排。我需要显示的只是带有图像的画布。

如何将这个DOM图像插入画布？

Answer 1

当您设置图像的来源（ourImage.src = "mandarin.jpg"）时，它尚未加载。这意味着如果您之后绘制图像，它将无法执行此操作。因为你的图像没有加载。您应该等待图像加载然后绘制它：

ourImage.onload = function(){
  context.drawImage(ourImage, 10, 10);
}
ourImage.src = "mandarin.jpg"

（请注意，在设置src之前挂钩事件非常重要。可能只有一个主要的JavaScript UI线程，但浏览器不是单线程的。浏览器通过立即触发src事件来响应您的设置load完全有效，因为该元素没有任何处理程序它，因此没有排队回调。至少有一个大约2008年的浏览器，如果图像在缓存中并且可用。）

DOM图像创建对象未插入到画布

1 个答案: