【笔记】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();
