如何用html5canvas實現(xiàn)勻速運動

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:12:17

如何用html5canvas實現(xiàn)勻速運動

如何用html5canvas實現(xiàn)勻速運動:勻速運動：指的是物體在一條直線上運動，并且物體在任何相等時間間隔內(nèi)通過的位移都是相等的。其實就是勻速直線運動，它的特點是加速度為0，從定義可知，在任何相等的時間間隔內(nèi)，速度大小和方向是相同的。<head> <meta charset='u

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀如何用html5canvas實現(xiàn)勻速運動:勻速運動：指的是物體在一條直線上運動，并且物體在任何相等時間間隔內(nèi)通過的位移都是相等的。其實就是勻速直線運動，它的特點是加速度為0，從定義可知，在任何相等的時間間隔內(nèi)，速度大小和方向是相同的。<head> <meta charset='u

勻速運動：指的是物體在一條直線上運動，并且物體在任何相等時間間隔內(nèi)通過的位移都是相等的。其實就是勻速直線運動，它的特點是加速度為0，從定義可知，在任何相等的時間間隔內(nèi)，速度大小和方向是相同的。

<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();
 }
}

該小球?qū)ο螅梢远ㄖ莆恢冒霃胶皖伾С謨煞N渲染方式（描邊和填充）

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

如何用html5canvas實現(xiàn)勻速運動

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：運動實現(xiàn) html5

熱門焦點

如何用html5canvas實現(xiàn)勻速運動

如何用html5canvas實現(xiàn)勻速運動

如何用html5canvas實現(xiàn)勻速運動

最新推薦

猜你喜歡

熱門推薦