canvas模拟重力效果
总结
- 速度和加速度是动画的基础元素,其中两者都是向量,包括了一个重要因素:方向。
- 要学会应用 分解 和 合成 ,将速度或加速度分解到x、y轴上,然后将每条轴上的加速度或速度相加,然后再分别与物体的位置坐标相加。
附录:
总要公式:
(1)将角速度分解为x、y轴上的速度向量
vx = speed * Math.cos(angle)
vy = spedd * Math.sin(angle)
(2)将角加速度分解为x、y轴上的加速度
ax = force * Math.cos(angle)
ay = force * Math.sin(angle)
(3)将加速度加入速度向量
vx += ax;
vy += ay;
(4)将速度向量加入位置坐标
object.x += vx;
object.y += vy;
下面是具体实现代码
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var g=0.3;
var bounce=-0.7;
function Ball(x, y, radius, speed) {
this.x = x;
this.y = y;
this.radius = radius;
this.speed = speed;
}
function Getrandom(min, max) {
return(Math.random() * (max - min) + min+1);
}
var ball = [];
document.getElementById("btn").onclick = function() {
var speed = {
x: 0,
y: 3
};
x=Getrandom(30,canvas.width-30);
ball.push(new Ball(x, 0, 10, speed))
}
function drawBall() {
cxt.clearRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < ball.length; i++) {
var b = ball[i];
cxt.beginPath();
b.x +=b.speed.x;
b.y += b.speed.y;
if(b.y>=canvas.height-b.radius*2){
b.y=canvas.height-b.radius*2;
b.speed.y*=bounce;
}
b.speed.y+=g;
b.y+=b.speed.y;
cxt.arc(b.x, b.y, b.radius, 0, Math.PI * 2, true);
cxt.fillStyle = "red";
cxt.fill();
cxt.closePath();
}
requestAnimationFrame(drawBall);
}
drawBall();
canvas模拟重力效果的更多相关文章
- 结合 CSS3 & Canvas 模拟人行走的效果
HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情.所谓只有想不到,没有做不到,的确如此.下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的 ...
- 经典!HTML5 Canvas 模拟可撕裂布料效果
这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...
- wpf 模拟3D效果(和手机浏览图片效果相似)(附源码)
原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依 ...
- 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活
使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果
- canvas实现倒计时效果示例(vue组件内编写)
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- 原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...
- jQuery效果之封装模拟placeholder效果,让低版本浏览器也支持
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...
- canvas/CSS仪表盘效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果
继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...
随机推荐
- Javascript笔记----实现Page页面右下角置顶按钮.
从用博客开始,发现博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS ...
- js获取鼠标位置的各种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- POJ2184 Cow Exhibition[DP 状态负值]
Cow Exhibition Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12420 Accepted: 4964 D ...
- 线程实现方式以及序列化 反序列化.java
一.序列化与反序列化 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上, ...
- u3d_Shader_effects笔记2 自定义surfaceDiffuseLight
1.前面的心情 今晚7点半睡着后,9点半左右被吵醒.醒来后非常失落,感觉人生到底在追求什么,我又在追求什么.昨晚梦到妈妈了.最近不时会想到爷爷的去世.人世的险恶,良心的缺失.不过一切总要向前看,至少我 ...
- NOIP模拟赛 寻找
题目描述 “我有个愿望,我希望穿越一切找到你.” 这是个二维平面世界,平面上有n个特殊的果实,我从(0,0)点出发,希望得到尽量多的果实,但是出于某种特殊的原因,我的运动方式只有三种(假设当前我在(x ...
- c# HttpClient禁止缓存
using (var client = new HttpClient()) { //方法1: CacheContr ...
- Openjudge 1.12-04
04:最匹配的矩阵 查看 总时间限制: 1000ms 内存限制: 65536kB 描述 给定一个m*n的矩阵A和r*s的矩阵B,其中0 < r ≤ m, 0 < s ≤ n,A.B所有 ...
- 启动PPT的时候一直配置vs2013的问题解决
前几天装了VS2013,结果发现每次启动powerpoint都要配置vs2013,虽然时间花的不多,可我看的就是碍眼,我都想把VS2013卸载来解决了.后来抱着试下的态度竟然在google上找到了解决 ...
- Html5的一些引擎使用感触
记得在2011年的时候,51CTO曾经采访我对H5的看法,因为当时Html5小组和雷友的关系,感觉是一片大火的形式,当时我的看法是:第一盈利模式不清晰,第二硬件跟不上,第三技术不成熟. 第一和第二点很 ...