htmt5-3 动起来

cxy020

浏览: 63603 次
性别:
来自: 北京

最近访客更多访客>>

zzy_001

u014212273

yaoye119

liunancun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html5

HTML

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />


<title>My first Game</title>

<style type="text/css">
body {
	border:none 0px;
	margin:0px;
	padding:10px;
	font-size : 16px;
	background-color : #f3f3f3;
}

canvas {
	border : 1px solid blue; 
}
</style>


<script type="text/javascript">
function loadImage(imglist,callback){
	var imgs = {};
	var count = imglist.length;
	var loadedcount = 0;
	
	for(var i=0; i<count; i++){
		var img = imglist[i];
		var image = imgs[img.id] = new Image();
		image.src = img.url;
		image.onload = function(evt){
			loadedcount++;
		}
	}
	
	if(typeof callback == "function"){
		var t = this;
		function check(){
			if(loadedcount >= count){
				callback.apply(t,arguments);
			}
			else{
				setTimeout(check,100);
			}
		}
		check();
	}
	return imgs;
}

var imgcache = null;
var canvas = null;
var context = null;

function init(){
	canvas = document.createElement("canvas");
	canvas.width = 600;
	canvas.height = 400;
	document.body.appendChild(canvas);
	
	context = canvas.getContext("2d");
	
	var imgs = [
		{id:"player",url:"../res/player.png"},
		{id:"bg",url:"../res/bg.png"}
	];
	
	imgcache = loadImage(imgs,startDemo);
};

function startDemo(){

	var fps=30;
	var sleep = Math.floor(1000/fps);//每秒循环30次(动画的肉眼效果每秒30针就能流畅的播放)
	
	var img = imgcache["player"];
	
	//初始坐标
	var x=0,y=284;
	
	//移动速度
	var speedx = 65/1000, speedy = -45/1000;//每秒往 x 正方向移动65px, y 反方向移动45px
	
	var minx=0,maxx=500,miny=0,maxy=284;
	
	var mainloop = setInterval(function(){
		var deltatime = sleep;
		
                  //每次循环,改变一下绘制的坐标. 
		x = x+speedx*deltatime;//向右移动
		y = y+speedy*deltatime;//向上移动 就是top值 在减少
		
		//限定移动范围
		x = Math.max(minx,Math.min(x,maxx));
		y = Math.max(miny,Math.min(y,maxy));
		
		context.drawImage(imgcache["bg"],0,0);//使用背景覆盖的方式 清空之前绘制的图片
		
		var sx=0,sy=60,sw=50,sh=60;
		context.drawImage(img,sx,sy,sw,sh,Math.floor(x),Math.floor(y),sw,sh);
	},sleep);
};
</script>

</head> 
<body onload="init()"> 


</body> 
</html>

思路很简单使用setInterval 不停的去改变图片的位置
值得注意的是每次都需要清空背景图片

分享到：

前端工程师的进阶之路 | html5-2 canvas添加图片

2011-06-14 18:06
浏览 1073
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

htmt5-3 动起来

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

htmt5-3 动起来

评论

发表评论

相关推荐

用CSS开启硬件加速来提高网站性能

微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整

屏幕旋转的事件和样式

如何去除android上a标签产生的边框

meta基础知识

单引号HTML转义符

html5-3-1 简单动画

画一条线

html5-2 canvas添加图片

html5-1 创建canvas

canvas 方法

最近访客更多访客>>