[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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM