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

匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为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>

 

posted @ 2017-10-08 20:48  ghostwu  阅读(2696)  评论(0)  编辑  收藏  举报
Copyright ©2017 ghostwu