时间戳

首页 > 解决方案 > Canva 图像有时使用 drawImage() 方法不显示图像？

javascript - Canva 图像有时使用 drawImage() 方法不显示图像？

问题描述

我只想使用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

标签： javascriptcanvasdrawimage

解决方案

这很可能是因为在实际图像完全加载之前调用了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";

推荐阅读