欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

[js高手之路] html5 canvas动画教程 - 匀速运动

程序员文章站 2024-03-16 20:49:58
...

匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的。

 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script>
 9         window.onload = function () {
10             var oCanvas = document.querySelector("#canvas"),
11                 oGc = oCanvas.getContext('2d'),
12                 width = oCanvas.width, height = oCanvas.height,
13                 x = 0;
14             function drawBall( x, y, cxt ){
15                 cxt.fillStyle = '#09f';
16                 cxt.beginPath();
17                 cxt.arc( x, y, 20, 0, 2 * Math.PI );
18                 cxt.closePath();
19                 cxt.fill();
20             }
21             ( function linear(){
22                 oGc.clearRect( 0, 0, width, height );
23                 drawBall( x, height / 2, oGc );
24                 x  = 2;
25                 console.log( x );
26                 requestAnimationFrame( linear );
27             } )();
28         }
29     </script>
30 </head>
31 <body>
32     <canvas id="canvas" width="1200" height="600"></canvas>
33 </body>

上述实例让一个半径20px的小球 从x=0, y=canvas高度的一半,以每帧2px的速度向右匀速运动.

我们可以把小球封装成一个对象:

ball.js文件:

 1 function Ball( x, y, r, color ){
 2     this.x = x || 0;
 3     this.y = y || 0;
 4     this.radius = r || 20;
 5     this.color = color || '#09f';
 6 }
 7 Ball.prototype = {
 8     constructor : Ball,
 9     stroke : function( cxt ){
10         cxt.strokeStyle = this.color;
11         cxt.beginPath();
12         cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
13         cxt.closePath();
14         cxt.stroke();
15     },
16     fill : function( cxt ){
17         cxt.fillStyle = this.color;
18         cxt.beginPath();
19         cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
20         cxt.closePath();
21         cxt.fill();
22     }
23 }

该小球对象,可以定制位置半径和颜色,支持两种渲染方式(描边和填充)

 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 ball = new Ball( 0, height / 2 );
15             (function linear() {
16                 oGc.clearRect(0, 0, width, height);
17                 ball.fill( oGc );
18                 ball.x  = 2;
19                 requestAnimationFrame(linear);
20             })();
21         }
22     </script>
23 </head>
24 
25 <body>
26     <canvas id="canvas" width="1200" height="600"></canvas>
27 </body>

 斜线匀速运动:

 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 ball = new Ball( 0, height );
15             (function linear() {
16                 oGc.clearRect(0, 0, width, height);
17                 ball.fill( oGc );
18                 ball.x  = 2;
19                 ball.y -= 1;
20                 requestAnimationFrame(linear);
21             })();
22         }
23     </script>
24 </head>
25 
26 <body>
27     <canvas id="canvas" width="1200" height="600"></canvas>
28 </body>

 任意方向的匀速运动(速度分解)

 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./ball.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 ball = new Ball( 0, 0 ),
15                 speed = 5,
16                 vx = speed * Math.cos( 10 * Math.PI / 180 ),
17                 vy = speed * Math.sin( 10 * Math.PI / 180 );
18                 
19             (function linear() {
20                 oGc.clearRect(0, 0, width, height);
21                 ball.fill( oGc );
22                 ball.x  = vx;
23                 ball.y  = vy;
24                 requestAnimationFrame(linear);
25             })();
26         }
27     </script>
28 </head>
29 <body>
30     <canvas id="canvas" width="1200" height="600"></canvas>
31 </body>