如何用html5canvas實現勻速運動

來源：懂視網責編：小采時間：2020-11-27 20:12:17

如何用html5canvas實現勻速運動

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

推薦度：

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

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

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

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

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

如何用html5canvas實現勻速運動

推薦度：

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

標簽：運動實現 html5

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

如何用html5canvas實現勻速運動

如何用html5canvas實現勻速運動

如何用html5canvas實現勻速運動

最新推薦

猜你喜歡

熱門推薦