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小球加速和减速运动相关推荐

如何用 JavaScript+Canvas 开发一款超级烧脑小游戏？
作者 | huangjianke 责编 | 伍杏玲出品 | CSDN(ID:CSDNnews) [CSDN 编者按]据微信最新数据,微信小游戏累计注册用户量已突破10亿.那么初学者如何开发一款好玩又 ...
常用的 JavaScript 库 CDN 加速服务
CDN 一般比你的网站快很多,可以在一定程度上加速访问,可以在一定程度上节省服务器流量,浏览器会缓存同一个地址的JS,因此,使用同一个 CDN 的人越多,加速效果越明显,为你的产品提供最佳的用户体验. ...
html鼠标拖尾效果,javascript canvas拖尾效果
{$title} var lujinglist = []; //制作路径 for (var x = 10; x <= 300; x++) { var dian = [x, 50]; lujing ...
利用canvas制作加速球波浪效果
我在第一篇博客中提到运用canvas制作加速球效果,现在把整个代码分享给大家,希望对大家有帮助.(转载请标明出处) 先上效果图: 还存在一些问题: 1.想法是鼠标触碰到滑块才执行画波浪的效果,结果是直 ...
canvas小球连线碰撞效果 html+css+js
先看效果(完整代码在底部): canvas小球连线碰撞完整源代码 html+css+js 这是我的B站地址~热烈欢迎实现(看注释,可一步一步跟着实现): 0:定义标签: <h1>北极光之 ...
JavaScript+ Canvas开发趣味小游戏《贪吃蛇》
一.效果展示二.<贪吃蛇>基本实现思路蛇头部分+蛇身体部分:采用对象形式来存储坐标,并将每个坐标对象放到一个snake数组中,方便使用.设置每个方格宽度30px,高度30px,画布高度 ...
JavaScript canvas实现俄罗斯方块
俄罗斯方块是个很经典的小游戏,也尝试写了一下.不过我想用尽量简洁逻辑清晰的代码实现.不用过多的代码记录下落方块的模型,或者记录每一个下落方块的x,y.想了下面的思路,然后发现这样很写很简明. 俄罗斯方 ...
JavaScript - canvas - 画直角坐标系
文章目录预备知识关于 canvas 画布的原点画直线项目结构 HTML CSS JavaScript 效果设置 canvas 起点偏移(平移变换) JavaScript 效果画空心三角形 ...
JavaScript - canvas - 镜像图片
文章目录参考 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
JavaScript canvas
简介 HTML5 <canvas> 是绘制图形/图像的容器.它本身并没有绘制能力,您必须使用脚本来完成实际的绘图任务(通常是 JavaScript). 如果浏览器不支持<canv ...

JavaScript、canvas小球加速和减速运动

Y轴方向的加速度

角速度

JavaScript、canvas小球加速和减速运动相关推荐

最新文章

热门文章