canvas画好几张图片时,叠层关系的问题

我们知道canvas画好几张图片时,按我们的思维应该是先画的在下面,后画的在最上面,可是事实不是这样的,细心的人会发现,叠层关系是随机的。

为什么呢?

这样想,我们画图片时是不是有这段代码

img.οnlοad=function(){
			ctx.drawImage(img,x,y);   	
		}
其实就是这段代码的问题,我们先分析一下这段代码, 其意思是图片加载完成之后再把它画到我们的画布上

好几张图片时,由于图片的加载的时间不一样,先加载完的先画,后加载完的后画,所以就会形成图片在画布上显示的叠层顺序和我们实际代码画的顺序由不一样,

如果要想按照我们想要的叠层顺序画在画布上,那么解决办法就是加延时器,最下面的不用加延时器,按照顺序最上面的,延时器的延时时间越长。


特别申明,本人在近期会写一个关于canvas的全部教程,会分为若干期,如有需要的实时关注!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Canvas板中插入多张图片,可以使用以下步骤: 1. 创建多个Image对象,使用JavaScript代码创建多个Image对象,可以通过new Image()来创建。 2. 加载图片,使用Image对象的src属性来设置图片的路径,然后监听load事件来确保图片已经加载完成。 3. 在Canvas上绘制图片,使用Canvas上下文对象的drawImage()方法来在Canvas上绘制图片,可以指定图片的位置和大小。 以下是代码示例: ```html <canvas id="canvas" width="500" height="500"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var img1 = new Image(); img1.src = 'image1.jpg'; var img2 = new Image(); img2.src = 'image2.jpg'; var img3 = new Image(); img3.src = 'image3.jpg'; var loadedImages = 0; var totalImages = 3; img1.onload = function() { loadedImages++; if (loadedImages === totalImages) { draw(); } } img2.onload = function() { loadedImages++; if (loadedImages === totalImages) { draw(); } } img3.onload = function() { loadedImages++; if (loadedImages === totalImages) { draw(); } } function draw() { ctx.drawImage(img1, 0, 0, canvas.width, canvas.height); ctx.drawImage(img2, 100, 100, 200, 200); ctx.drawImage(img3, 300, 300, 100, 100); } </script> ``` 在上面的示例中,我们首先创建了一个Canvas元素和一个Canvas上下文对象,然后创建了多个Image对象并设置了图片路径,接着监听每个图片的load事件,每次图片加载完成后,将loadedImages加1,当所有图片都加载完成后,调用draw()函数,在函数中使用drawImage()方法在Canvas上绘制多张图片
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值