Canvas Js製作動量守恆的小球碰撞

目的：通過js實現小球碰撞並實現動量守恆

canvas我們就不多說了，有用著呢。

我們可以通過canvas畫2d圖形（圓、方塊、三角形等等）3d圖形（球體、正方體等待）。

當然這只是基礎的皮毛而已，canvas的強大之處在於可以做遊戲，匯入模型，粒子效果，實現漫遊又或者全景和vr。

這裡我們介紹純js寫的2d小球碰撞。（主要是博主的three.js不咋地）

好吧，老規矩，先上圖！

額。。。很尷尬的是博主的截圖功底不咋地，沒有截下碰撞的瞬間。

話不多說，開始教程。

首先我們需要建立畫布給它乙個id方便後面監聽處理。

<

body
>
<
canvas 
id="mycanvas"
>
canvas
>
body
>

//

宣告畫布大小為螢幕的1/3
var　width = window.innerwidth/3;
var  height = window.innerheight/3;
var canvas = document.getelementbyid("mycanvas");
canvas.width =width;
canvas.height =height;
//建立2d畫筆
var ctx = canvas.getcontext("2d");
//填充顏色設定為黑色（背景色）
ctx.fillstyle = "#000";
//將整個畫布填充
ctx.fillrect(0,0,width,height);

x和y填充的起始座標點，width和height是填充區域的寬和高。

由於我們建立的是帶有物理性質的小球，所以我們用乙個函式封裝建立小球的**。

以後建立小球直接呼叫它就行了。

function

ball(x,y,vx,vy,ax,ay,size,rou,color,ctx)
this
.draw(ctx);
}

//

碰撞檢測 動量守恆
//x,y,vx,vy,ax,ay,size,rou,color,ctx
var balla = new ball(20,0.5*height,5,-3,0,0,8,1,"#ff0",ctx);
var ballb = new ball(width-20,0.5*height,-3,5,0,0,13,1,"#0ff",ctx);
var ballc = new ball(width/2,0.5*height,7,4,0,0,13,1,"#0ff",ctx);

function

animation()
}//判斷是否碰撞到畫布的邊緣
if(balla.x+balla.size>=width||balla.x-balla.size<=0)
if(balla.y+balla.size>=height||balla.y-balla.size<=0)
if(ballb.x+ballb.size>=width||ballb.x-ballb.size<=0)
if(ballb.y+ballb.size>=height||ballb.y-ballb.size<=0)
//清空畫布，畫出小球
ctx.fillstyle = "#000";
ctx.fillrect(0,0,width,height);
balla.draw(ctx);
ballb.draw(ctx);
}

setinterval(animation,30);

懶人福利！！！

完整**。

<

html
>
<
head
>
<
style
>
body
style
>
head
>
<
body
>
<
canvas 
id="mycanvas"
>
canvas
>
body
>
<
script
>
//宣告畫布大小為螢幕的1/3
varwidth 
=window.innerwidth/3;
varheight 
=window.innerheight/3;
varcanvas 
=document.getelementbyid(
"mycanvas");
canvas.width 
=width;
canvas.height 
=height;
//建立2d畫筆
varctx 
=canvas.getcontext("2d
");//填充顏色設定為黑色（背景色）
ctx.fillstyle ="
#000";
//將整個畫布填充
ctx.fillrect(0,
0,width,height);
//碰撞檢測 動量守恆
//x,y,vx,vy,ax,ay,size,rou,color,ctx
varballa 
=new
ball(20,
0.5*
height,5,
-3,0
,0,8
,1,"
#ff0
",ctx);
varballb 
=new
ball(width-20
,0.5
*height,-3
,5,0
,0,13
,1,"
#0ff
",ctx);
varballc 
=new
ball(width
/2,0.5*height,7,4,0,0,13,1,"#0ff",ctx);
setinterval(animation,
30);
function
animation()
}//判斷是否碰撞到畫布的邊緣
if(balla.x
+balla.size
>=
width
||balla.x
-balla.size
<=0)
if(balla.y
+balla.size
>=
height
||balla.y
-balla.size
<=0)
if(ballb.x
+ballb.size
>=
width
||ballb.x
-ballb.size
<=0)
if(ballb.y
+ballb.size
>=
height
||ballb.y
-ballb.size
<=0)
//清空畫布，畫出小球
ctx.fillstyle ="
#000";
ctx.fillrect(0,
0,width,height);
balla.draw(ctx);
ballb.draw(ctx);
}function
ball(x,y,vx,vy,ax,ay,size,rou,color,ctx)
this
.draw(ctx);
}script
>
html
>

不定時隨緣更新。

角動量與角動量守恆

角速度 2 t 2 t因此線速度 v rv rl r p r mv mrv mr2 i l r p r mv mrv mr2 i 當芭蕾舞演員由雙臂張開到握緊雙臂，i mr2 i m r2減小，則 變大，也就是轉得更快。i i 表示轉動慣量 角動量是向量有大小，有方向，方向根據右手螺旋定則判斷，大拇...

openFOAM動量方程中張量的處理

tmpueqn fvm ddt rho,u i fvm div phi,u ii mrf.ddt rho,u iii turbulence divdevreff u iv fvoptions rho,u v 其中，i 為非穩態項 ii 為對流項 iii 為mrf造成的附加修正 iv 為應力張量 v ...

廣義動量定理的定義

內容提要 本章首先通過物理學的動量定理，愛因斯坦的成功方程式和稻盛和夫的成果方程式推導得到廣義動量定理f t mv。廣義動量定理的本質是力量在時間上的積累效應。然後分析了廣義動量定理中力量f，方向 時間t，作用點，數量n，質量m和廣義速度v對於成果的影響，對比了廣義動量定理與動量定理的區別。本章提出...