键盘控制小球移动
众所周知，我们所看到的动画实际上就是一系列静态画面快速切换，从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后，在canvas上绘制动画效果就显得比较简单了。我们只需要将某个静态图形先清除，然后在另外一个位置重新绘制，如此反复，让静态图形按照一定的轨迹进行移动，就可以产生动画效果了。
下面，我们在canvas上绘制一个实心小球，然后用键盘上的方向键控制小球的移动，从而产生动态效果。示例代码如下：
JavaScript Code复制内容到剪贴板
html>
html5?canvas绘制可移动的小球入门示例
您的浏览器不支持canvas标签。
//获取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.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.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);?//再绘制最新的小球
}
请使用支持html5的浏览器打开以下网页以查看实际效果(使用方向键进行移动)：
使用canvas绘制可移动的小球。
小丑笑脸只需要了解很少的几个API，然后使用需要的动画参数，就能制作出这个有趣又能响应你的动作的Web动画。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery