html5-canvas “ context.drawImage”是否不在画布上显示图像？

Z时代
2024-01-10
分类：综合

示例

使用尝试在画布上绘制图像对象之前，请确保已将其完全加载context.drawImage。否则，图像将无声显示。

在JavaScript中，图像不会立即加载。相反，图像是异步加载的，并且在加载图像的过程中，JavaScript会继续执行后续的任何代码image.src。这意味着context.drawImage可能用空图像执行，因此将不显示任何内容。

在尝试使用.drawImage绘制图像之前确保图像已完全加载的示例

var img=new Image();
img.onload=start;
img.onerror=function(){alert(img.src+' failed');} 
img.src="someImage.png";
function start(){
    // 在图像完全加载之后，将调用start() 
    //     代码中起始位置的位置
}

在尝试绘制任何图像之前先加载多个图像的示例

功能齐全的图像加载器更多，但是此示例说明了如何执行此操作。

// 第一张图片
var img1=new Image();
img1.onload=start;
img1.onerror=function(){alert(img1.src+' failed to load.');};
img1.src="imageOne.png";
// 第二张图片
var img2=new Image();
img2.onload=start;
img1.onerror=function(){alert(img2.src+' failed to load.');};
img2.src="imageTwo.png";
//
var imgCount=2;
// 每次加载图像时都会调用start
function start(){
    // 倒计时，直到所有图像加载完毕
    if(--imgCount>0){return;}
    // 现在已成功加载所有图像
    //context.drawImage将成功绘制每个
    context.drawImage(img1,0,0);
    context.drawImage(img2,50,0);
}