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

作者:分分快三计划

 任意方向的匀速运动(速度分解卡塔 尔(阿拉伯语:قطر‎

 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>

大家能够把小球封装成二个指标:

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

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

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 }

匀速运动:指的是实体在一条直线上活动,并且物体在别的相等时间距离内经过的运动都以十二分的。其实正是匀速直线运动,它的特点是加快度为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>

 

该小球对象,能够定制地点半径和颜料,扶植二种渲染格局(描边和填充卡塔 尔(英语:State of Qatar)

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划