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

      2020-03-17 21:21      HTML5

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

1 <head> 2<meta charset='utf-8' /> 3<style> 4 #canvas { 5 border: 1px dashed #aaa; 6 } 7</style> 8<script> 9window.onload = function () {10var oCanvas = document.querySelector("#canvas"),11oGc = oCanvas.getContext('2d'),12width = oCanvas.width, height = oCanvas.height,13x = 0;14function drawBall( x, y, cxt ){15cxt.fillStyle = '#09f';16 cxt.beginPath();17cxt.arc( x, y, 20, 0, 2 * Math.PI );18 cxt.closePath();19 cxt.fill();20 }21( function linear(){22oGc.clearRect( 0, 0, width, height );23drawBall( x, height / 2, oGc );24x += 2;25 console.log( x );26 requestAnimationFrame( linear );27 } )();28 }29</script>30 </head>31 <body>32<canvas></canvas>33 </body>

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

我们可以把小球封装成一个对象:

ball.js文件:

1 function Ball( x, y, r, color ){ 2this.x = x || 0; 3this.y = y || 0; 4this.radius = r || 20; 5this.color = color || '#09f'; 6 } 7 Ball.prototype = { 8 constructor : Ball, 9stroke : function( cxt ){10cxt.strokeStyle = this.color;11 cxt.beginPath();12cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );13 cxt.closePath();14 cxt.stroke();15 },16fill : function( cxt ){17cxt.fillStyle = this.color;18 cxt.beginPath();19cxt.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>10window.onload = function () {11var oCanvas = document.querySelector("#canvas"),12oGc = oCanvas.getContext('2d'),13width = oCanvas.width, height = oCanvas.height,14ball = new Ball( 0, height / 2 );15(function linear() {16oGc.clearRect(0, 0, width, height);17 ball.fill( oGc );18ball.x += 2;19 requestAnimationFrame(linear);20 })();21 }22</script>23 </head>24 25 <body>26<canvas></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>10window.onload = function () {11var oCanvas = document.querySelector("#canvas"),12oGc = oCanvas.getContext('2d'),13width = oCanvas.width, height = oCanvas.height,14ball = new Ball( 0, height );15(function linear() {16oGc.clearRect(0, 0, width, height);17 ball.fill( oGc );18ball.x += 2;19ball.y -= 1;20 requestAnimationFrame(linear);21 })();22 }23</script>24 </head>25 26 <body>27<canvas></canvas>28 </body>

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


上一篇:一张图理清ASP.NET Core启动流程 - 『圣杰』

下一篇:没有了