如何用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

热门焦点

如何用html5canvas实现匀速运动

如何用html5canvas实现匀速运动

如何用html5canvas实现匀速运动

最新推荐

猜你喜欢

热门推荐