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

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

为什么呢?

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

img.onload=function(){
			ctx.drawImage(img,x,y);
		}

其实就是这段代码的问题,我们先分析一下这段代码,其意思是图片加载完成之后再把它画到我们的画布上,

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

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

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

时间: 2024-10-08 15:28:43

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

HTML5 canvas画带箭头的虚线

 本案例注意事项: 1.当你拖动箭头时 canvas里面线条绘制自动重新计算点. 2.canvas没有画虚线的api,因为对api不是很熟悉,所以就不献丑了,在网上找的. 3.箭头出来后 点击画布里面的任意点 箭头将延伸到该处,至于具体的应用 修改canvas的lineTo属性就能实现了. 4.具体的代码解释我写的比较清楚,修改箭头样式只需写过lineTo即可,非常简单. 效果如下: 代码如下: <!--程序说明: 作者:xue51 描述:该程序主要是通过exchange的支持在IE下面实现ca

延时-怎么实现canvas画出来的圈圈显示时间小于1毫秒

问题描述 怎么实现canvas画出来的圈圈显示时间小于1毫秒 我想让canvas中画出小圈圈并移动,显示时间要小于1毫秒或足够短.这样挥动手机时不会有"影子".还想问android里怎么实现延时小于1ms..

为什么 Android 上 Canvas 画出的图形不够平滑

本文讲的是为什么 Android 上 Canvas 画出的图形不够平滑, 通过 Google 搜索我们很快就能找到这个在 StackOverflow 中被问了很多次的问题,同时答案也经常是相同的:你需要给你的 Paint 对象设置 ANTI_ALIAS_FLAG 属性.但对于大多数人来说这并不能解决问题.下面我讲讲原因. 在 Canvas 上绘制 若你需要在 Canvas 上绘制,你有两种选择. 直接在 Canvas 上绘制. 先在 Bitmap 上绘制再将 Bitmap 绘制到 Canvas

JavaScript学习小结之使用canvas画“哆啦A梦”时钟_javascript技巧

前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的hello world,也算是一种进步咯~ 好的各位,请上车的乘客往里走,请不要堵塞通道,谢谢.我们开车吧~ 正文: 今天先上图吧,看看效果再说 今天的蓝胖子长这样,看到它还是这么胖,我就放心了.这世界还是充满正能量的,总归还有人比我胖,哈哈哈 然后是上代码 html部分 <canvas id="

[Windows Phone] 地图覆叠层控制项(MapOverlay )

原文:[Windows Phone] 地图覆叠层控制项(MapOverlay ) 前言 当使用地图时,我们可能需要定位一些座标图示或是绘制一些文字线条,这时可以在地图上加上覆叠层进行绘制,在 Windows Phone 应用程式中是透过地图覆叠层控制项(MapOverlay )来达成,本文将以实例展示如何使用. ? 实作 step1 建立专案. ? step2 在 WMAppManifest.xml 滑鼠左键按两下进行编辑. ? step3 开启 WMAppManifest.xml 後,先切换至

滚动弹出层的滚动条时背景层不滚动

问题描述 滚动弹出层的滚动条时背景层不滚动 在做弹出层时,因内容太多,需要加滚动条,当滚动弹出层的滚动条时下面的背景层的滚动条也会滚动,现在想让背景层不滚动,怎么解决? 解决方案 做两层,上面一层透明,有滚动条,下面一层仅显示一个背景

html-div叠层问题,如何让一个div一直在最高层?

问题描述 div叠层问题,如何让一个div一直在最高层? 多个div,怎么设定某个div在其最高层,好像用z-index不太可行.要怎么办? 解决方案 首先设置position:absolute 然后再设置z-index

canvas画的进度条,谁会?帮忙画个。

问题描述 canvas画的进度条,谁会?帮忙画个(如下图所示). 解决方案 发代码吧:<!DOCTYPE><html><head><meta charset="utf-8" /><title>无标题文档</title><style type="text/css">*{padding:0px; margin:0px;}html{height:100%;}body{height:100%

宽带隙太阳能电池材料及其叠层器件研究获进展

聚合物太阳能电池具有质量轻.柔性及低成本等独特的优势,近10多年来受到世界各国科学工作者的广泛关注.如何在拓宽材料分子吸收的同时,保持高开路电压是有机光伏领域一个重要研究内容.采用叠层器件结构将两个具有不同吸收范围的单结电池串联起来,可以同时实现宽吸收光谱与高开路电压,是提升有机太阳能电池效率的有效方法之一.目前宽带隙聚合物光伏材料的种类相对较少,这在一定程度上限制了叠层电池的子电池之间的光谱互补,进而限制效率的进一步提高. 在国家杰出青年基金项目.中国科学院战略性先导科技专项等资助下,中科院福