【笔记】javascript canvas实现图片切换动画 |
您所在的位置：网站首页 › javascript切换图片动画特效 › 【笔记】javascript canvas实现图片切换动画 |
|
本文记录在学习canvas过程中的一个小例子--图片切换动画 html 部分创建canvas对象 及 DOCTYPE html> 跳跳小游戏 * { 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; }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.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= (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();
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |