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

2024-04-14 23:50:05 363

示例

使用尝试在画布上绘制图像对象之前，请确保已将其完全加载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); }

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

示例

热门推荐

随机推荐