當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript、canvas小球加速和减速运动
生活随笔
收集整理的這篇文章主要介紹了
JavaScript、canvas小球加速和减速运动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果如下圖：整個正方形的邊長為400，這里設置小球的位置在（400,100）,初始位置在正方形的右邊，設置加速度為-1。
聲明小球的類：
function Ball(radius, color) {this.radius = radius || 10;this.color = color || "red";this.x = 0;this.y = 0;this.rotation = 0;this.scaleX = 1;this.scaleY = 1;this.lineWidth = 3; }Ball.prototype.draw = function (context) {context.save();context.translate(this.x, this.y);context.rotate(this.rotation);context.scale(this.scaleX, this.scaleY);context.lineWidth = this.lineWidth;context.fillStyle = this.color;context.beginPath();context.arc(0, 0, this.radius, 0, Math.PI * 2, true);context.closePath();context.fill();if (this.lineWidth > 0) {context.stroke();}context.restore(); }下次渲染渲染小球的時候，直接引用這個Ball類就好。
HTML：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>velocity 加速度</title> </head><body><canvas id='canvas' width="400" height="400" style="border: 1px solid red;"></canvas><script src="./js/ball.js"></script><script>window.onload = () => {let canvas = document.getElementById('canvas');let context = canvas.getContext('2d'),ball = new Ball(10,'blue',context),vx = -1;ball.x = 400;ball.y = 100;(function drawFrame() {window.requestAnimationFrame(drawFrame, canvas);context.clearRect(0, 0, canvas.width, canvas.height);ball.x += vx;ball.draw(context);}())}</script> </body></html>requestAnimationFrame：控制小球循環運動，不然小球會一直停留在初始的一幀，沒有產生運動的效果。
context.clearRect：清楚上一幀的圖案。
Y軸方向的加速度
要是想在Y軸方向上設置一個加速的話，需要聲明一個Y軸加速度vy，然后再小球循環運動的時候，重置小球的Y軸的位置即可ball.y +=vy;
角速度
先把角度轉化為弧度，公式為：angle * Math.PI / 180，其中angle為角度，計算結果就是弧度了。
假設這個角度為angle=45，則弧度等于：
let radians = angle * Math.PI / 180;let vx = Math.sin(radians) * range;let vy = Math.cos(radians) * range;ball.x -= vx;ball.y += vy;總結
以上是生活随笔為你收集整理的JavaScript、canvas小球加速和减速运动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQLServer创建数据库详解
- 下一篇： SQLServer数据库收缩相关知识笔记