这篇文章将为大家详细讲解有关怎样利用HTML5Canvas制作键盘及鼠标动画，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
乌苏网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。创新互联自2013年创立以来到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
键盘控制小球移动
众所周知，我们所看到的动画实际上就是一系列静态画面快速切换，从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后，在canvas上绘制动画效果就显得比较简单了。我们只需要将某个静态图形先清除，然后在另外一个位置重新绘制，如此反复，让静态图形按照一定的轨迹进行移动，就可以产生动画效果了。
下面，我们在canvas上绘制一个实心小球，然后用键盘上的方向键控制小球的移动，从而产生动态效果。示例代码如下：
JavaScript Code复制内容到剪贴板
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.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); //再绘制最新的小球
}
