腾讯微群加入QQ群

 找回密码
 加入我们

!connect_header_login!

!connect_header_login_tip!

搜索
查看: 177|回复: 0

自己写的HTML5 canvas动画制作函数,非常简单易懂

[复制链接]
发表于 2016-8-11 18:08:45 | 显示全部楼层 |阅读模式

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport"

content="width=device-width,target-densitydpi=high-dpi,initial-scale=0.36, minimum-scale=0.36, maximum-scale=2, user-scalable=yes" />

<meta charset="utf-8" />

    <title>动画</title>

    <link rel="stylesheet"href="include/css/global.css"type="text/css" />

    <link rel="stylesheet" type="text/css"href="css/scrollbar.css"/>

    <link rel="stylesheet" type="text/css"href="css/style.css?id=1"/>

    

    <script src="js/jquery-1.6.4.min.js"></script>

    <script type="application/javascript"src="js/iscroll.js?v4"></script>

    <script type="text/javascript"src="js/swipeview.js"></script>

    <script type="application/javascript"src="js/common.js"></script>

    <script>

        var mycanvas,context;

        var background=new Image();

        var atm = new sprite();

        var clock = new sprite();

        var wheel = new sprite();

        var lightning = new sprite();

        var truck = new sprite();

        var windmill = new sprite();

        var ibmlogo = new sprite();

        var balloon = new sprite();

        var clouds = new sprite();

        

        var windmillImage=new Image();

        windmillImage.src = "images/windmill.png";

        windmill.images.push(windmillImage);

        

        var ibmlogoIMG=new Image();

        ibmlogoIMG.src = "images/ibmlogo.png";

        ibmlogo.images.push(ibmlogoIMG);

        

        var cloudsIMG=new Image();

        cloudsIMG.src = "images/clouds.png";

        clouds.images.push(cloudsIMG);

        clouds.time = 200;

        

        var balloonIMG=new Image();

        balloonIMG.src = "images/balloon.png";

        balloon.images.push(balloonIMG);

        balloon.x = 0;

        balloon.y = 800;

        balloon.time = 200;

        

        atm.time = 2;

        clock.time = 10;

        wheel.time =1;

        truck.time = 30;

        truck.x = (4540 + 562/2)*0.2;

        truck.y = (6039 + 858/2)*0.2;

        

        var context;

        var i = 0;

        

        background.src="images/animateBackground.png";

        for(var i=1; i<=12; i++){

            var temp=new Image();

            temp.src = "images/atm/atm" + i +".png";

            atm.images.push(temp);

        }

        

        for(var i=1; i<=13; i++){

            var temp=new Image();

            temp.src = "images/clock/clock" + i +".png";

            clock.images.push(temp);

        }

        

        for(var i=1; i<=3; i++){

            var temp=new Image();

            temp.src = "images/wheel/wheel" + i +".png";

            wheel.images.push(temp);

        }

  

        var lightning1=new Image();

        lightning1.src = "images/lightning1.png";

        var lightning2=new Image();

        lightning2.src = "images/lightning2.png";

        lightning.images.push(lightning1);

        lightning.images.push(lightning2);

        lightning.images.push(lightning2);

        lightning.images.push(lightning2);

        

        var truckimg=new Image();

        truckimg.src = "images/truck.png";

        truck.images.push(truckimg);

        

        window.onload = function(){

            var mycanvas=document.getElementById("myCanvas");

            context=mycanvas.getContext('2d');

            context.drawImage(background,0,0);

            setInterval(doAnimate,100)

        }

        var k=0;

        function doAnimate(){

            context.drawImage(background,0,0);

            atm.draw(553,695);

            clock.draw(795,405);

            wheel.draw(618,278);

            lightning.draw(23*0.2,2843*0.2);

            balloon.moveTo(800,400);

            //truck.moveTo((2660 + 562/2)*0.2, (3850 + 858/2)*0.2);

            windmill.rotate(2532*0.2+38,773*0.2+48);

            windmill.rotate(1469*0.2+38,1342*0.2+48);

            windmill.rotate(3360*0.2+38,518*0.2+48);

            windmill.rotate(3438*0.2+38,992*0.2+48);

            

            

            

            ibmlogo.draw((2540)*0.2, (4082)*0.2);

            

            clouds.moveTo(200,100);

            k++;


        }

        

        //自己写个动画精灵类吧!

        function sprite(){


            this.i= 0;

            this.time = 1;

            this.count = 0;

            this.x = 0;

            this.y = 0;

            this.images = [];

            var instance = this;

            this.draw =function(x,y){

                

                instance.count++;

                

                if(instance.i ==  instance.images.length){

                    instance.i=0;

                }

                var img = instance.images;


                context.drawImage(img[instance.i],x,y);

                if(instance.count%instance.time ==0) instance.i++;

            }

            

            this.moveTo = function(x,y){

                instance.count++;

                

                if(instance.i ==  instance.images.length){

                    instance.i=0;

                }

                var img = instance.images;

                var delx = (x - instance.x)/instance.time;

                var dely = (y - instance.y)/instance.time;

                var step = (instance.count%instance.time);

                //console.log(instance.x+step*delx);

                context.drawImage(img[instance.i],instance.x+step*delx ,instance.y+step*dely);

                if(instance.count%instance.time ==0) instance.i++;

            }

            

            this.rotate = function(x,y){

                

                instance.count++;

                

                if(instance.i ==  instance.images.length){

                    instance.i=0;

                }

                var img = instance.images;

                

                context.save()

                context.translate(x,y);

                context.rotate(k * Math.PI / 18);

                context.drawImage(img[instance.i], -img[instance.i].width/2, -img[instance.i].height/2);

                context.translate(-x,-y);

                context.restore()

                

                if(instance.count%instance.time ==0) instance.i++;


            }

        }

        function shwoMenu(){


            $("#menu").toggle();

        }

</script>

</head>

    <body>

        <div style="margin-left:0px;">

            <canvas id="myCanvas" width="885" height="1430"

                style="background-im:blue;"onclick="shwoMenu()"></canvas>

        </div>

        <div id="menu"style="position:absolute;margin-top:-1430px;margin-left:0px;display:none">

            <div style="float:left;margin-left:540px;margin-top:40px"><imgsrc="images/energyICON.png"width="200"height="200"></div>

            <div style="float:left;margin-left:80px;margin-top:500px"><imgsrc="images/insuranceICON.png"width="200"height="200"></div>

            <div style="float:left;margin-left:200px;margin-top:250px"><imgsrc="images/bankICON.png"width="200"height="200"></div>

            <div style="float:left;margin-left:50px;margin-top:450px"><imgsrc="images/saleICON.png"width="200"height="200"></div>

            <div style="float:left;margin-left:-400px;margin-top:-450px"><imgsrc="images/carICON.png"width="200"height="200"></div>

        </div>

    </body>

</html>

0
0

转自:http://blog.csdn.net/wuzehai02/article/details/11563607
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

QQ|手机版|Archiver|小黑屋|一起疯|苦咖啡 ( 新ICP备12000197号  

GMT+8, 2018-1-17 05:04 , Processed in 0.095476 second(s), 13 queries , Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表