怎么利用HTML5Canvas制作键盘及鼠标动画

这篇文章将为大家详细讲解有关怎么利用HTML5 Canvas制作键盘及鼠标动画，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

潞城网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作，到程序开发，运营维护。创新互联于2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

键盘控制小球移动

众所周知，我们所看到的动画实际上就是一系列静态画面快速切换，从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后，在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制作键盘及鼠标动画”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。