[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>
上一篇： 【小游戏】你比划我来猜
下一篇： skui skia-m85