<head> <meta charset='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script> window.onload = function () { var oCanvas = document.querySelector("#canvas"), oGc = oCanvas.getContext('2d'), width = oCanvas.width, height = oCanvas.height, x = 0; function drawBall( x, y, cxt ){ cxt.fillStyle = '#09f'; cxt.beginPath(); cxt.arc( x, y, 20, 0, 2 * Math.PI ); cxt.closePath(); cxt.fill(); } ( function linear(){ oGc.clearRect( 0, 0, width, height ); drawBall( x, height / 2, oGc ); x += 2; console.log( x ); requestAnimationFrame( linear ); } )(); } </script> </head> <body> <canvas id="canvas" width="1200" height="600"></canvas> </body>
上述实例让一个半径20px的小球 从x=0, y=canvas高度的一半,以每帧2px的速度向右匀速运动.
我们可以把小球封装成一个对象:
ball.js文件:
function Ball( x, y, r, color ){ this.x = x || 0; this.y = y || 0; this.radius = r || 20; this.color = color || '#09f'; } Ball.prototype = { constructor : Ball, stroke : function( cxt ){ cxt.strokeStyle = this.color; cxt.beginPath(); cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI ); cxt.closePath(); cxt.stroke(); }, fill : function( cxt ){ cxt.fillStyle = this.color; cxt.beginPath(); cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI ); cxt.closePath(); cxt.fill(); } }
该小球对象,可以定制位置半径和颜色,支持两种渲染方式(描边和填充)
<head> <meta charset='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script src="./ball.js"></script> <script> window.onload = function () { var oCanvas = document.querySelector("#canvas"), oGc = oCanvas.getContext('2d'), width = oCanvas.width, height = oCanvas.height, ball = new Ball( 0, height / 2 ); (function linear() { oGc.clearRect(0, 0, width, height); ball.fill( oGc ); ball.x += 2; requestAnimationFrame(linear); })(); } </script> </head> <body> <canvas id="canvas" width="1200" height="600"></canvas> </body>
斜线匀速运动:
<head> <meta charset='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script src="./ball.js"></script> <script> window.onload = function () { var oCanvas = document.querySelector("#canvas"), oGc = oCanvas.getContext('2d'), width = oCanvas.width, height = oCanvas.height, ball = new Ball( 0, height ); (function linear() { oGc.clearRect(0, 0, width, height); ball.fill( oGc ); ball.x += 2; ball.y -= 1; requestAnimationFrame(linear); })(); } </script> </head> <body> <canvas id="canvas" width="1200" height="600"></canvas> </body>
任意方向的匀速运动(速度分解)
<head> <meta charset='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script src="./ball.js"></script> <script> window.onload = function () { var oCanvas = document.querySelector("#canvas"), oGc = oCanvas.getContext('2d'), width = oCanvas.width, height = oCanvas.height, ball = new Ball( 0, 0 ), speed = 5, vx = speed * Math.cos( 10 * Math.PI / 180 ), vy = speed * Math.sin( 10 * Math.PI / 180 ); (function linear() { oGc.clearRect(0, 0, width, height); ball.fill( oGc ); ball.x += vx; ball.y += vy; requestAnimationFrame(linear); })(); } </script> </head> <body> <canvas id="canvas" width="1200" height="600"></canvas> </body>
以上就是如何用html5 canvas实现匀速运动的详细内容,更多请关注php中文网其它相关文章!