Canva 图像有时使用 drawImage() 方法不显示图像？ [复制]答案

【问题标题】：Canva image dont display the image sometime using drawImage() method? [duplicate]Canva 图像有时使用 drawImage() 方法不显示图像？ [复制]
【发布时间】：2019-08-28 19:40:39
【问题描述】：

我只想使用 drawImage() 方法在画布上绘制图像。但有时图像未绘制。即使我使用 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

【问题讨论】：

标签： javascript canvas drawimage

【解决方案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";

【讨论】：

【解决方案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 值之前定义事件处理函数很重要。

希望有所帮助:)

【讨论】：

【解决方案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";

&lt;canvas id=gameArea&gt;&lt;/canvas&gt;

【讨论】：