canvas画动图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.canvasWrap{
width:500px;
height: 500px;
background: #CDCDCD;
margin: 50px auto;
position: relative;
}
#myCanvas{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
background: red;
}
</style>
</head>
<body>
<div class="canvasWrap">
<canvas id="myCanvas" width="400" height="400"></canvas>
</div>
<script type="text/javascript">
// var c=document.getElementById("myCanvas");
// var cxt=c.getContext("2d");
// cxt.fillStyle="#FF0000";
// cxt.fillRect(150,150,150,75);
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
var img3=new Image()
// img.src="https://ai.mobile.taikang.com/gameStep/res/bg/img/lupai@3x.png"
var arr = ["img/girl.jpg","img/HBuilder.png"]
var arr2 = [
"res/male00001.png",
"res/male00002.png",
"res/male00003.png",
"res/male00004.png",
"res/male00005.png",
"res/male00006.png",
"res/male00007.png",
"res/male00008.png",
"res/male00009.png",
"res/male00010.png",
"res/male00011.png",
"res/male00012.png",
"res/male00013.png",
"res/male00014.png",
"res/male00015.png",
"res/male00016.png",
"res/male00017.png",
"res/male00018.png",
"res/male00019.png",
"res/male00020.png",
"res/male00021.png",
"res/male00022.png",
"res/male00023.png",
"res/male00024.png",
"res/male00025.png",
"res/male00026.png",
"res/male00027.png",
"res/male00028.png",
"res/male00029.png",
"res/male00030.png",
]
var arr3 = [
"cat/cat00001.png",
"cat/cat00002.png",
"cat/cat00003.png",
"cat/cat00004.png",
"cat/cat00005.png",
"cat/cat00006.png",
"cat/cat00007.png",
"cat/cat00008.png",
"cat/cat00009.png",
"cat/cat00010.png",
"cat/cat00011.png",
"cat/cat00012.png",
"cat/cat00013.png",
"cat/cat00014.png",
"cat/cat00015.png",
"cat/cat00016.png",
"cat/cat00017.png",
"cat/cat00018.png",
"cat/cat00019.png",
"cat/cat00020.png",
"cat/cat00021.png",
"cat/cat00022.png",
"cat/cat00023.png",
"cat/cat00024.png",
"cat/cat00025.png",
"cat/cat00026.png",
"cat/cat00027.png",
"cat/cat00028.png",
]
// for(let i=0;i<5;i++){
//// img.src=arr[i]
//// img.onload = function(){
//// cxt.drawImage(img,100,100,200,200);
//// }
//
// setTimeout(function(){
// console.log(j)
// },2000)
//
// }
var arrLength = arr2.length
var arrLength3 = arr3.length
var i = 0
var j = 0
img.src=arr2[i]
img.onload = function(){
cxt.drawImage(img,100,100,200,200);
}
img3.src=arr3[j]
img3.onload = function(){
cxt.drawImage(img3,210,290,80,80);
}
var may = setInterval(function(){
if(i>=arrLength){
i=4
}else{
//
img.src=arr2[i]
img.onload = function(){
cxt.save()
cxt.clearRect(100,100,200,200)
cxt.drawImage(img,100,100,200,200);
i++
cxt.restore()
}
}
if(j>=arrLength3){
j=4
}else{
img3.src=arr3[j]
img3.onload = function(){
cxt.clearRect(210,290,80,80)
cxt.drawImage(img3,210,290,80,80);
j++
}
}
},50)
</script>
</body>
</html>
