Canvas 入门8 物理效果
Posted 编程圈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Canvas 入门8 物理效果相关的知识，希望对你有一定的参考价值。
重力
公式：
重力加速度
9.81m/s2，或表示为 32ft/s2。
计算
将角速度分解为x、y轴上的速度向量
vx = speed * Math.cos(angle)
vy = spedd * Math.sin(angle)
将角加速度分解为x、y轴上的加速度
ax = force * Math.cos(angle)
ay = force * Math.sin(angle)
将加速度加入速度向量
vx += ax;
vy += ay;
将速度向量加入位置坐标
object.x += vx;
object.y += vy;
代码
<html>
<head></head>
<canvas id=canvas width=300 height=300></canvas>
<input type="button" id="btn" value="开始" />
<body>
<script>
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: Getrandom(-2,2),
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();
</script>
</body>
</html>
参考：
抛物线
使用曲线作为轨迹
<html>
<head></head>
<input type="button" id="btn" value="开始" />
<canvas id=canvas width=300 height=300></canvas>
<body>
<script>
(function()
var W=innerWidth,H=innerHeight;
var cvs=document.querySelector("canvas"),
ctx=cvs.getContext("2d"),
isCast=false;
cvs.width=W;
cvs.height=H;
function Parabola(x0,y0,x1,y1,vx,a)
var x=x1-x0,y=y1-y0;
this.x0=x0;
this.y0=y0;
this.x1=x1;
this.y1=y1;
this.a=a||0.002;
this.b=(y-this.a*x*x)/x;
this._x=0;
this.vx=(((x1-x0)>>31)*2+1)*vx;
this.radius=5;
Parabola.prototype.cast=function(ctx)
//座标计算
var x=(this._x+=this.vx),
// y=a*x^2+b*x ，曲线计算
y=this.a*x*x+this.b*x,
//是否到达终点
isArrived=Math.abs(x+this.x0-this.x1)<Math.abs(this.vx);
ctx.beginPath();
isArrived?ctx.arc(this.x1,this.y1,this.radius,0,Math.PI*2,true):ctx.arc(x+this.x0,y+this.y0,this.radius,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
return !isArrived;
;
document.getElementById(btn).addEventListener("click",function()
if(isCast)return;
var x0=Math.random()*W,
y0=Math.random()*H,
x1=Math.random()*W,
y1=Math.random()*H,
radius=5,
parabola=new Parabola(x0,y0,x1,y1,5);
isCast=true;
//起点
ctx.fillStyle="red";
ctx.beginPath();
ctx.arc(x0,y0,radius,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
//终点
ctx.fillStyle="blue";
ctx.beginPath();
ctx.arc(x1,y1,radius,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
function render()
if(parabola.cast(ctx))
requestAnimationFrame(render);
else
isCast=false;
render();
,false);
)();
</script>
</body>
</html>
参考：
http://www.qdfuns.com/notes/11445/4f7c74e6ab3c44507cb27b211dfb534a.html
以上是关于Canvas 入门8 物理效果的主要内容，如果未能解决你的问题，请参考以下文章