【筆記】javascript canvas實現圖片切換動畫

本文轉載自查看原文 2019-08-08 11:38 577 javascript canvas

本文記錄在學習canvas過程中的一個小例子--圖片切換動畫

html 部分創建canvas對象及

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <title>跳跳小游戲</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
            background: black;
            position: relative;
        }
        #canvas {
            background: white;
            margin: auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
        }
    </style>
</head>
<body>
    <canvas id="canvas" ></canvas>
    <script src="script/main.js"></script>
</body>
</html>

js部分

1.圖片加載（資源加載）

    loadsource: function () { //加載圖片
        game.curpostion.imgobj = new Image();
        game.curpostion.imgobj.onload = function () {
            if (game.curpostion.imgobj.complete == true) {
                game.isloaded = true;
            }
        }
        game.curpostion.imgobj.src = game.imageurl;
    },

本文功能的圖片只有一張，如果是多張圖片或還有其他資源的話就需要定義變量來一點一點來加載代碼如下

    sourcepaths: ["loading.gif","",...],//所有資源的路徑
    sourcepathindex: 0,//加載資源索引
    sources: [],//所有資源
    loadSource: function (src, type, callbackfunc) {//加載資源單個
        if (type == "img") {
            var img = new Image();
            if (/msie/.test(game.useragent)) {//兼容
                img.onreadystatechange = function () {
                    if (img.readyState == "complete" || img.readyState == "loaded") {
                        game.sourcepathindex = game.sourcepathindex + 1;
                        game.sources.push({ name: src, img: img });
                        callbackfunc(game.sourcepathindex);
                    }
                }
            } else if {
                img.onload = function () {
                if (img.complete == true) {
                    game.sourcepathindex = game.sourcepathindex + 1;
                    game.sources.push({ name: src, img: img });
                    callbackfunc(game.sourcepathindex);
                } 
            }
            }
            img.src = src;    
        } else if(type == "mp3"){
            var audio = new Audio();
            audio.load();
            game.sourcepathindex = game.sourcepathindex + 1;
            callbackfunc(game.sourcepathindex);
         }//else if...其他類型資源
    },
    loadSources: function (i) {//加載資源
        if (i < game.sourcepaths.length - 1) {
            var index1 = game.sourcepaths[i].lastIndexOf(".");
            var index2 = game.sourcepaths[i].length;
            var postf = game.sourcepaths[i].substring(index1, index2);//后綴名
            var src = "" + game.sourcepaths[i] + "";
            game.loadSource(src, "mp3", game.loadSources);
        }
        else if (i >= game.sourcepaths.length - 1) {//加載完成
        }
    },

2. 實現圖片切換使用的方法--請求幀動畫

 　　　　window.requestAnimFrame = (function () {
            return  function (callback,element) {
                window.setTimeout(callback, 1000 / 20);
            };
        })();
        (function drawFrame() {
            window.requestAnimFrame(drawFrame, game.canvas);
            if(game.isloaded) {//判斷如果加載完成開始動畫               
            }
        }());

以下給出所有js代碼

var game={
    //基礎變量
    canvas:document.getElementById('canvas'),//canvas
    context:document.getElementById('canvas').getContext("2d"),//context
    baseval:1,//基礎伸縮參數
    color:["#FF0000","#87CEFA","#00EEEE","#EE82EE","#CAFF70","#00F5FF","#9A32CD"],//平台顏色
    platlist:[{x:0,y:600,width:400,height:0,isroof:false,colorindex:0},{x:600,y:300,width:300,height:0,isroof:true,colorindex:1}],//當前顏色
    speed:0,//當前速度
    curpostion:{imgobj:null,fixedx:200,x:200,y:460,width:90,height:140,action:0,nextaction:0,isactive:false},//當前小人 state 運動狀態:run 跑步中 jump 跳起來 down 落下來 //90*140
    actionlist:[{list:[0,1,2,3,4,5],curindex:0}, {list:[0,1,2,3,4,5,6],curindex:0},{list:[7,8,9,10,11,12],curindex:0},{list:[7,8,9,10,11,12,13],curindex:0},{list:[14],angle:0,lastaction:1,length:6,maxlength:6},{list:[15],length:6,maxlength:6,lastaction:1},{list:[15],length:6,maxlength:6}],//所有動作列表 0-runleft 1-jumpleft 2-runright 3-jumpright 4-fan 5-down 6-dun
    imageurl:"/jumpgame/images/1.png",//圖片url
    isloaded:false,
    //函數
    loadsource: function () { //加載圖片
        game.curpostion.imgobj = new Image();
        game.curpostion.imgobj.onload = function () {
            if (game.curpostion.imgobj.complete == true) {
                game.isloaded = true;
            }
        }
        game.curpostion.imgobj.src = game.imageurl;
    },
    drawplat: function () {
        for(var i=0;i<game.platlist.length;i++){
            game.context.fillStyle = game.color[game.platlist[i].colorindex];
            game.context.fillRect(game.platlist[i].x*game.baseval, game.platlist[i].y*game.baseval, game.platlist[i].width*game.baseval, game.canvas.height-game.platlist[i].y*game.baseval);
        }
    },
    drawpp: function () {
        switch(game.curpostion.action) {
            case 0:
            {////runleft  下一動作 可能為跳起來 再下一動作為 翻翻；下一動作為蹲下 再下一動作為蹲下 再下一動作為 跑右 ；下一動作為 stop 再下一動作為 stop ； ；重復跑步動作
                game.context.drawImage(game.curpostion.imgobj, game.actionlist[game.curpostion.action].list[game.actionlist[game.curpostion.action].curindex] * game.curpostion.width, 0, game.curpostion.width, game.curpostion.height, game.curpostion.x * game.baseval, game.curpostion.y * game.baseval, game.curpostion.width * game.baseval, game.curpostion.height * game.baseval);
                game.actionlist[game.curpostion.action].curindex++;
                if (game.actionlist[game.curpostion.action].curindex > game.actionlist[game.curpostion.action].list.length) {
                    game.curpostion.action = game.curpostion.nextaction;
                    game.actionlist[0].curindex=0;
                    if (game.curpostion.nextaction == 1) {
                        game.actionlist[4].lastaction=1;
                        game.curpostion.nextaction = 4;
                    }
                    else if (game.curpostion.nextaction == 5) {
                        game.curpostion.nextaction = 5;
                    }
                    else if (game.curpostion.nextaction == 6) {
                        game.curpostion.nextaction = 2;
                    }
                    else {
                        game.curpostion.nextaction = 0;
                    }
                }
                break;
            }
            case 1:
            {//jumpleft   下一動作為跳起來翻跟頭 或者stop  再下一動作只能為 stop;
                game.context.drawImage(game.curpostion.imgobj, game.actionlist[game.curpostion.action].list[game.actionlist[game.curpostion.action].curindex] * game.curpostion.width, 0, game.curpostion.width, game.curpostion.height, game.curpostion.x * game.baseval, game.curpostion.y * game.baseval, game.curpostion.width * game.baseval, game.curpostion.height * game.baseval);
                game.actionlist[game.curpostion.action].curindex++;
                if (game.actionlist[game.curpostion.action].curindex > game.actionlist[game.curpostion.action].list.length) {
                    game.curpostion.action = game.curpostion.nextaction;
                    game.actionlist[1].curindex=0;
                    game.curpostion.nextaction == 5;
                    game.actionlist[5].lastaction=game.actionlist[4].lastaction;
                 }
                break;
            }
            case 2:
            {//runright   下一動作 可能為跳起來 再下一動作為 翻翻；下一動作為蹲下 再下一動作為蹲下 再下一動作為 跑左 ；下一動作為 stop 再下一動作為 stop ；重復跑步動作
                game.context.drawImage(game.curpostion.imgobj, game.actionlist[game.curpostion.action].list[game.actionlist[game.curpostion.action].curindex] * game.curpostion.width, 0, game.curpostion.width, game.curpostion.height, game.curpostion.x * game.baseval, game.curpostion.y * game.baseval, game.curpostion.width * game.baseval, game.curpostion.height * game.baseval);
                game.actionlist[game.curpostion.action].curindex++;
                if (game.actionlist[game.curpostion.action].curindex > game.actionlist[game.curpostion.action].list.length) {
                    game.curpostion.action = game.curpostion.nextaction;
                    game.actionlist[2].curindex=0;
                    if (game.curpostion.nextaction == 3) {
                        game.actionlist[4].lastaction=3;
                        game.curpostion.nextaction = 4;
                    }
                    else if (game.curpostion.nextaction == 5) {
                        game.curpostion.nextaction = 5;
                    }
                    else if (game.curpostion.nextaction == 6) {
                        game.curpostion.nextaction = 0;
                    }
                    else {
                        game.curpostion.nextaction = 2;
                    }
                }
                break;
            }
            case 3:
            {//jumpright 下一動作為跳起來翻跟頭 或者stop  再下一動作只能為 stop;
                game.context.drawImage(game.curpostion.imgobj, game.actionlist[game.curpostion.action].list[game.actionlist[game.curpostion.action].curindex] * game.curpostion.width, 0, game.curpostion.width, game.curpostion.height, game.curpostion.x * game.baseval, game.curpostion.y * game.baseval, game.curpostion.width * game.baseval, game.curpostion.height * game.baseval);
                game.actionlist[game.curpostion.action].curindex++;
                if (game.actionlist[game.curpostion.action].curindex > game.actionlist[game.curpostion.action].list.length) {
                    game.curpostion.action = game.curpostion.nextaction;
                    game.actionlist[3].curindex=0;
                    if(game.curpostion.isactive){
                        game.curpostion.nextaction = 5;
                        game.actionlist[5].lastaction=game.actionlist[4].lastaction;
                    } else{
                        game.curpostion.nextaction = 5;
                    }
                 }
                break;
            }
            case 4:
            {//fan  下一動作為 stop    再下一動作 左/右run 或者stop
                game.context.save();
                game.context.translate(game.curpostion.x * game.baseval, game.curpostion.y * game.baseval);
                game.context.rotate(angle * Math.PI / 180);
                game.context.translate(-game.curpostion.x * game.baseval, -game.curpostion.y * game.baseval);
                game.context.drawImage(game.curpostion.imgobj, game.actionlist[game.curpostion.action].list[0] * game.curpostion.width, 0, game.curpostion.width, game.curpostion.height, game.curpostion.x * game.baseval, game.curpostion.y * game.baseval, game.curpostion.width * game.baseval, game.curpostion.height * game.baseval);
                game.context.restore();
                game.actionlist[4].angle+=15;
                game.actionlist[game.curpostion.action].length--;
                if (game.actionlist[game.curpostion.action].length<0) {
                    game.curpostion.action = game.curpostion.nextaction;
                    game.actionlist[4].lastaction=1;
                    game.actionlist[4].angle=0;
                    game.actionlist[4].length=game.actionlist[4].maxlength;
                    if(game.curpostion.isactive){
                        game.actionlist[5].lastaction=game.actionlist[4].lastaction;
                        game.curpostion.nextaction=game.actionlist[4].lastaction==1?0:2;
                    } else{
                        game.curpostion.nextaction = 5;
                    }
                }
                break;
            }
            case 5:
            {//down  下一動作為 stop    再下一動作 左/右run 或者stop
                game.context.drawImage(game.curpostion.imgobj, game.actionlist[game.curpostion.action].list[0] * game.curpostion.width, 0, game.curpostion.width, game.curpostion.height, game.curpostion.x * game.baseval, game.curpostion.y * game.baseval, game.curpostion.width * game.baseval, game.curpostion.height * game.baseval);
                game.actionlist[game.curpostion.action].length--;
                if (game.actionlist[game.curpostion.action].length<0) {
                    game.curpostion.action = game.curpostion.nextaction;
                    if (game.curpostion.nextaction == 4) {
                        game.actionlist[4].angle=0;
                        game.curpostion.nextaction = 4;
                    }
                    else {
                        game.curpostion.nextaction = 5;
                    }
                }
                break;
            }
            default:
            {
                break;
            }
        }

        if(game.actionlist[game.curpostion.action].list.length>1){
            game.context.drawImage(game.curpostion.imgobj,game.actionlist[game.curpostion.action].list[game.actionlist[game.curpostion.action].curindex]*game.curpostion.width,0,game.curpostion.width,game.curpostion.height, game.curpostion.x*game.baseval, game.curpostion.y*game.baseval, game.curpostion.width*game.baseval, game.curpostion.height*game.baseval);//這里取的是實際尺寸
            game.actionlist[game.curpostion.action].curindex++;
            game.actionlist[game.curpostion.action].curindex=game.actionlist[game.curpostion.action].curindex%game.actionlist[game.curpostion.action].list.length;
        }else{
            game.context.drawImage(game.curpostion.imgobj,game.actionlist[game.curpostion.action].list[game.actionlist[game.curpostion.action].curindex]*game.curpostion.width,0,game.curpostion.width,game.curpostion.height, game.curpostion.x*game.baseval, game.curpostion.y*game.baseval, game.curpostion.width*game.baseval, game.curpostion.height*game.baseval);//這里取的是實際尺寸
        }
    },
    init: function () {
        if ((document.body.clientWidth / document.body.clientHeight) >= (2.0 / 3.0)) {
            game.canvas.height = document.body.clientHeight-2;
            game.canvas.width = game.canvas.height * (2.0 / 3.0);
        } else {
            game.canvas.width = document.body.clientWidth-2;
            game.canvas.height = game.canvas.width / (2.0 / 3.0);
        }
        game.baseval=game.canvas.height/ 1210.00;;
        game.loadsource();
        window.requestAnimFrame = (function () {
            return  function (callback,element) {
                window.setTimeout(callback, 1000 / 20);
            };
        })();
        (function drawFrame() {
            window.requestAnimFrame(drawFrame, game.canvas);
            if(game.isloaded) {
                game.context.clearRect(0, 0, game.canvas.width, game.canvas.height);
                game.drawplat();
                game.drawpp();
            }
        }());
    },
};
game.init();

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript實現圖片切換 JavaScript實現簡單的圖片切換功能 JavaScript實現圖片切換（數組版）這個圖片切換動畫只用CSS3實現 JavaScript 圖片自動切換 JQuery圖片切換動畫效果怎么用JavaScript實現tab切換 jquery實現圖片切換和js實現圖片切換 css實現圖片切換 jquery實現圖片切換