您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2013年10月01日 09:20 最近更新于 2019年07月24日 18:27

原创 使用html5 canvas绘制动画效果

3450 次浏览 读完需要≈ 7 分钟 HTML5CanvasJavaScript

内容目录

注意:本文属于《html5 Canvas绘制图形入门详解》系列文章中的一部分。如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文。请点击上述链接以了解使用html5 canvas绘制图形的完整内容。

在前面的《html5 Canvas绘制图形入门详解》系列文章中我们已经学习了如何使用canvas绘制基本的图形,现在我们尝试使用canvas来绘制动画效果。

众所周知,我们所看到的动画实际上就是一系列静态画面快速切换,从而让肉眼因视觉残像产生了“画面在活动”的视觉效果。明白了这一点后,在canvas上绘制动画效果就显得比较简单了。我们只需要将某个静态图形先清除,然后在另外一个位置重新绘制,如此反复,让静态图形按照一定的轨迹进行移动,就可以产生动画效果了。

下面,我们在canvas上绘制一个实心小球,然后用键盘上的方向键控制小球的移动,从而产生动态效果。示例代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5 canvas绘制可移动的小球入门示例</title>
</head><body onkeydown="moveBall(event)"><!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>

<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");

//表示圆球的类
function Ball(x, y ,radius, speed){
	this.x = x || 10;	//圆球的x坐标,默认为10
	this.y = y || 10;	//圆球的y坐标,默认为10
	this.radius = radius || 10;	//圆球的半径,默认为10
	this.speed = speed || 5;	//圆球的移动速度,默认为5
	
	//向上移动
	this.moveUp = function(){
		this.y -= this.speed;
		if(this.y < this.radius){
			//防止超出上边界
			this.y = this.radius;			
		}
	};
	
	//向右移动
	this.moveRight = function(){
		this.x += this.speed;
		var maxX = canvas.width - this.radius;
		if(this.x > maxX){
			//防止超出右边界
			this.x = maxX;			
		}
	};
	
	//向左移动
	this.moveLeft = function(){
		this.x -= this.speed;
		if(this.x < this.radius){
			//防止超出左边界
			this.x = this.radius;			
		}
	};
	
	//向下移动
	this.moveDown = function(){
		this.y += this.speed;
		var maxY = canvas.height - this.radius;
		if(this.y > maxY){
			//防止超出下边界
			this.y = maxY;
		}
	};
}

//绘制小球
function drawBall(ball){
	if(typeof ctx != "undefined"){
		ctx.beginPath();
		ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
		ctx.fill();
	}
}

//清空canvas画布
function clearCanvas(){
	if(typeof ctx != "undefined"){
		ctx.clearRect(0, 0, 400, 300);		
	}
}

var ball = new Ball();
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){  
	//获取对应的CanvasRenderingContext2D对象(画笔)
	var ctx = canvas.getContext("2d");
	drawBall(ball);
}

//onkeydown事件的回调处理函数
//根据用户的按键来控制小球的移动
function moveBall(event){
	switch(event.keyCode){
		case 37:	//左方向键
			ball.moveLeft();
			break;
		case 38:	//上方向键
			ball.moveUp();
			break;
		case 39:	//右方向键
			ball.moveRight();
			break;
		case 40:	//下方向键
			ball.moveDown();
			break;
		default:	//其他按键操作不响应
			return;
	}
	
	clearCanvas();	//先清空画布
	drawBall(ball);	//再绘制最新的小球
}
</script>
</body>
</html>

请使用支持html5的浏览器打开以下网页以查看实际效果(使用方向键进行移动):
使用canvas绘制可移动的小球

  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论