canvas实例--飞鸟 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height: 100%;
            overflow: hidden;
            background-color: white;
        }
#test{
background-color: #616161;
    position: absolute;
    left:50%;
    top:50%;
  transform: translate3d(-50%,-50%,0);
    margin:auto;
}
    </style>
</head>
<body>
<canvas id="test">
    <span>您的浏览器不支持canvas</span>
</canvas>
</body>
</html>
<script>
 var canvas=document.querySelector('#test');
 //将整个视口设置为飞鸟运动的框口
 canvas.width=document.documentElement.clientWidth;
 canvas.height=document.documentElement.clientHeight;

 if(canvas.getContext){
     var ctx=canvas.getContext('2d');
var flag=0;
var value=0;
// 定时器：动态的获取飞鸟图片
     setInterval(function () {
         ctx.clearRect(0,0,canvas.width,canvas.height);
         value+=10;
         flag++;
         if(flag===9){
             flag=1;
         }
var img=new Image();
img.src="img/1"+(flag)+".jpg";
img.onload=function () {
draw();
}
     },1000/60);
function draw(img) {
ctx.drawImage(img,value,0,)
}
 }
</script>
posted @ 2020-08-18 20:24  花未眠0619  阅读(201)  评论(0)    收藏  举报