Canva图像有时候不使用drawImage（）方法显示图像？ [重复]

Question

这个问题在这里已有答案：

• CanvasContext2D drawImage() issue [onload and CORS] 1回答

我只想使用drawImage（）方法在canva上绘制图像。但是有时候不会绘制图像。即使我使用onload事件，它仍然无法显示图像。在我提出我的问题之前，我想要确切地说，图像是在某些时候绘制的，而不是在某个时间绘制的。那么这个问题的原因是什么，我该如何解决或修复它。

let imagez = new Image();
    imagez.src="photo/run.png";
    context.drawImage(imagez,10,10,50,60); // it does not draw the image always. why?

I expect the image to be drawn whenever I  refresh the page

Answer 1

这很可能是因为在完全加载实际图像之前调用了drawImage（）方法。在调用drawImage（）之前等待它完成加载。

var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.width = 400;
canvas.height = 300;
var context = canvas.getContext("2d");
let imagez = new Image();
imagez.onload = function() {
  context.drawImage(imagez, 10, 10, 50, 60);
}
imagez.src = "https://picsum.photos/400/300";

Answer 2

为此，您必须等待图像加载到内存中，然后才能绘制到画布。

一个简单的loadIMAGE()功能来实现这一点可能看起来像这样......

function loadIMAGE(path, x, y, w, h) {
    var img = new Image();

    img.addEventListener("load", function(e) {
        // 'this' === the image Object
        context.drawImage(this, x, y, w, h); 
    }, !1);

    img.src = path;
}

// USAGE
loadIMAGE("photo/run.png", 10, 10, 50, 60);

在分配src值之前定义事件处理函数非常重要。

希望有帮助:)

Answer 3

您试图在不知道它是否已成功加载的情况下绘制图像... 这是一个使用onload事件的工作示例

const canvas = document.getElementById("gameArea");
context = canvas.getContext("2d");

let imagez = new Image();
imagez.onload = function () {
  context.drawImage(imagez, 10, 10, 50, 60); 
}
imagez.src = "https://upload.wikimedia.org/wikipedia/commons/e/e2/3D_Gyroscope.png";

<canvas id=gameArea></canvas>