本文记录在学习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();
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
