html5画布直线运动,HTML5+CSS3从入门到精通 如何实现匀速运动

本篇教程探讨了HTML5+CSS3从入门到精通 如何实现匀速运动，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

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

1 

2     

3     

4         #canvas {

5             border: 1px dashed #aaa;

6         }

7     

8     

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     

30 

31 

32     

33 

上述实例让一个半径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 

2     

3     

4         #canvas {

5             border: 1px dashed #aaa;

6         }

7     

8     

9     

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     

23 

24

25 

26     

27 

斜线匀速运动：

1 

2     

3     

4         #canvas {

5             border: 1px dashed #aaa;

6         }

7     

8     

9     

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     

24 

25

26 

27     

28 

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

1 

2     

3     

4         #canvas {

5             border: 1px dashed #aaa;

6         }

7     

8     

9     

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     

28 

29 

30     

31 

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！