canvas模拟重力效果

总结

  1. 速度和加速度是动画的基础元素,其中两者都是向量,包括了一个重要因素:方向。
  2. 要学会应用 分解 和 合成 ,将速度或加速度分解到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();

时间: 2024-10-26 17:57:19

canvas模拟重力效果的相关文章

经典!HTML5 Canvas 模拟可撕裂布料效果

这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 源码下载     效果演示 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!

结合 CSS3 &amp; Canvas 模拟人行走的效果

HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情.所谓只有想不到,没有做不到,的确如此.下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的动画效果. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 插件下载     效果演示 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 40

wpf 模拟3D效果(和手机浏览图片效果相似)(附源码)

原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依赖属性也不介绍.),个人认为,依赖属性这个东西,有百分之五十是为了3D而存在.(自己写的类似于demo的东西)先上图,无图无真相这是demo的整个效果图,可以用鼠标移动,触摸屏也可以手指滑动,图片会移动,然后移动结束,会有一个回弹的判断. <Window x:Class="_3Dshow.Wi

用canvas模拟钟表

很久没有更新博客了,最近忙实习准备面试,快要心力交瘁-_-.空闲下来后,用HTML5的canvas模拟的简易钟表,贴上代码. 效果如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas模拟钟表</title> <style> bod

强大的CSS:模拟下雪效果动画制作教程

下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言 由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非css3和canvas(还有gif),对比下css3和canvas的优缺点: 动画自由度:canvas胜: 复杂度:canvas胜: 兼容性:canvas胜: 性能:css3胜(requestAnimationFrame和硬件加速). 由于对于性能有一定的要求,canvas对比css3会有更多的计算

CSS:模拟下雪效果动画制作教程

下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言 由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非css3和canvas(还有gif),对比下css3和canvas的优缺点: 动画自由度:canvas胜: 复杂度:canvas胜: 兼容性:canvas胜: 性能:css3胜(requestAnimationFrame和硬件加速). 由于对于性能有一定的要求,canvas对比css3会有更多的计算

canvas之太阳系效果

星球 变量名 公转周期 光色 暗色 水星 Mercury 87.70 #a69697 #5c3e40 金星 Venus 224.701.70 #c4bbac #1f1315 地球 Earth 365.2422 #78b1e8 #050c12 火星 Mars 686.98 #cec9b6 #76422d 木星 Jupiter 4332.589 #c0a48e #322 土星 Saturn 10759.95 #f7f9e3 #5c4553 天王星 Uranus 30799.095 #a7e115 #

canvas动画文字效果

Doughnut Chartvar c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.font="50px sans-serif";ctx.fillText("75%",40,92);//ctx.clearRect(40, 52, 74, 68); var c=document.getElementById("canvas"

js模拟placeholder效果1

由于有的浏览器不支持placeholder,所以写了一个jquery插件来模拟placeholder效果. 使用方法:$("#IDName").placeholder(); 话不多说,直接上代码~~~ (function ($) {     $.fn.placeholder = function (options) {         var defaults = {             pColor: "#BEBEBE",             pActiv