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

标签 javascript canvas drawimage

<分区>

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

最佳答案

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

关于javascript - Canva 图像有时不使用 drawImage() 方法显示图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55560163/

相关文章:

javascript - 无法绘制大于 250px 正方形的图像

javascript - 添加到服务器后刷新 Discord 机器人的事件

javascript - 添加 Loader 直到 STL 图像加载 PHP

javascript - 为什么我的 HTML Canvas 不旋转?

javascript - 将 html canvas 二进制数据发送到 Google Photos API

javascript - 在 JavaScript 中绘制图像( Canvas )

c# - 为什么 Graphics.DrawImage 裁剪了我图像的一部分?

php - 裁剪、调整大小、缩略图、转换图像的开源脚本

javascript - + function() { } 符号有什么作用?

image - 在 html5 中绘制图像/纹理