当前位置: 首页 > 技术随笔 > 使用html5 canvas绘制动画效果

使用html5 canvas绘制动画效果

注意:本文属于《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绘制可移动的小球

19 0
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。