利用HTML5 Canvas制作键盘及鼠标动画的实例分享_H5之家

键盘控制小球移动

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

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

JavaScript Code复制内容到剪贴板

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>html5canvas绘制可移动的小球入门示例</title>

</head>

<bodyonkeydown="moveBall(event)">

<canvasid="myCanvas"width="400px"height="300px"style="border:1pxsolidred;">

您的浏览器不支持canvas标签。

</canvas>

<scripttype="text/javascript">

//获取Canvas对象(画布)

varcanvas=document.getElementById("myCanvas");

//表示圆球的类

functionBall(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;

varmaxX=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;

varmaxY=canvas.height-this.radius;

if(this.y>maxY){

//防止超出下边界

this.y=maxY;

}