应用场景

在制作html5小游戏时需要使用canvas绘制图片，但是图片是异步加载的，需要发送请求获取数据，这就导致不能在设置src之后直接使用绘制方法，而是需要等待图片加载完成。

加载单张图片

使用onload事件
当图片加载完成后会触发onload事件，在事件处理函数中进行绘制

var img= new Image();
img.onload=function(){ctx.drawImage(img,100,100,200,300);
}
img.src="test.jpg";

使用异步函数

通过使用异步执行的函数可以在主线程中的程序执行完之后才执行子线程中的程序，相当于onload

var img= new Image();
img.src="test.jpg";
setInterval(function(){ctx.drawImage(img,100,100,200,300);
},100);

使用promise


imgPro = new Promise((resolve,reject) => {var img= new Image();img.src="test.jpg";img.onload = function (){resolve(img)}img.onerror = function  (e){reject(e);}
})
imgPro.then(img => {ctx.drawImage(img,100,100,200,300);
});

加载多张图片

通过自定义变量判断

在图片绘制时通过一个自定义变量判断图片是否已经加载完毕，如果加载完毕，就进行绘制,这种方法也是使用onload，但可以用于多张图片的绘制判断

var  paint =0;
var img= new Image();
img.onload=function(){paint+=50;
if(paint===100){ctx.drawImage(img2,100,100,200,300);
ctx.drawImage(img,100,100,200,300);
}
}
img.src="test.jpg";
var img2= new Image();
img2.onload=function(){paint+=50;
if(paint===100){ctx.drawImage(img2,100,100,200,300);
ctx.drawImage(img,100,100,200,300);
}
}
img2.src="testing.jpg";

这种方法不管是哪一张图片后加载都可以将两张图片都会绘制到页面上，并且图片的顺序可以根据自己的需要进行排列。

也可以使用promise加载多张图片


promise.all([new Promise((resolve,reject) => {let img = new Image();img.src = "test.jpg";img.onload = function (){resolve(img);}img.onerror = function(e){reject(e);}
}),new Promise((resolve,reject) => {let img = new Image();img.src = "testing.jpg";img.onload = function (){resolve(img);}img.onerror = function(e){reject(e);}
})]).then(imgs => {ctx.drawImage(imgs[0,100,100,200,300);
ctx.drawImage(imgs[1],100,100,200,300);
})

canvas动态绘制图片的方法相关推荐

html5canvas绘制图片源码,HTML5 CANVAS：绘制图片
HTML5 CANVAS:绘制图片通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素 ...
【HTML】Canvas(3)-绘制图片
开发游戏的时候,游戏中的地图.背景.任务.物品等都是由图片组成的,这次我们来谈谈在canvas中如何操作图片吧. canvas中提供了drawImage函数和putImageData函数来绘制图片. ...
前端html生成图片,HTML5 Canvas：绘制图片
通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素类型: HTMLImageEleme ...
php图片动画源码,JavaScript_jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载），ImageDrawer.js是一款可以实现动 - phpStudy...
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载) ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可 ...
小程序 canvas 2d 绘制图片并保存
获取canvas实例,使用的官方的代码.用一个变量canvas保存实例,后续保存时会调用. data () {return {canvas: null // 实例} }, onReady() {con ...
php画钟,canvas如何绘制钟表的方法_html5教程技巧
这篇文章主要介绍了HTML5中的canvas如何绘制钟表的方法的相关资料,小编觉得HTML真的是越来越强大的,现在分享给大家,也给大家做个参考.对HTML的小伙伴们可以一起跟随小编过来看看吧本文介绍 ...
微信小程序canvas 2d 绘制图片与文字导出图片
wxml内容如下 <canvas id="myCanvas" type="2d"style="width: {{ canvas.width } ...
html5动态画图,HTML5使用Canvas动态绘制心型线和玫瑰线的教程
1HTML5的Canvas元素提供了丰富的绘图功能,能够使我们制作出许多精美的动画.本次将运用canvas绘制心型线和玫瑰线. 1.心型线和玫瑰线绘制这两种曲线,首先我们分别选用两个参数方程(心型线 ...
怎样用html制作动态心,HTML5使用Canvas动态绘制心型线和玫瑰线的教程
1html5的canvas元素提供了丰富的绘图功能,能够使我们制作出许多精美的动画.本次将运用canvas绘制心型线和玫瑰线. 1.心型线和玫瑰线绘制这两种曲线,首先我们分别选用两个参数方程(心型线 ...

canvas动态绘制图片的方法

应用场景

加载单张图片

加载多张图片

canvas动态绘制图片的方法相关推荐

最新文章

热门文章