canvas可以實現一些有趣的繪畫，可以實現規則或者不規則的圖形。我們這裡的小球就是乙個通過canvas的方法arc畫出的圓。我們可以使用storke和fil來實現圓的顏色和邊框，如果你還想讓圓在漂亮一些，使用createradialgradient可以實現球顏色的漸變。
var grad = context.createradialgradient(x,y,5,x,y,20);
//顏色
grad.addcolorstop(0,'rgb(231, 74, 148)');
grad.addcolorstop(0.5,'rgb(99, 75, 231)');
grad.addcolorstop(1,'rgb(78, 228, 156)');
if(jiaflag!=1)
cxt.beginpath();
cxt.arc(x,y,ball.r,0,2*math.pi);
cxt.strokestyle="#000000";
cxt.fillstyle=grad;
context.createradialgradient(x0,y0,r0,x1,y1,r1);
x0 漸變的開始圓的 x 座標
y0 漸變的開始圓的 y 座標
r0 開始圓的半徑
x1 漸變的結束圓的 x 座標
y1 漸變的結束圓的 y 座標
r1 結束圓的半徑
小球畫好了，怎麼樣才能讓小球動起來呢？其實很簡單，所謂的動畫其實質就是一幀一幀的靜態元素組合起來，讓人眼感覺像是動的一樣。所以讓小球動起來，你需要在頁面讓不停的畫小球，而且你畫的小球的位置要符合運動的規律，這樣你的小球就動了起來。
首先，我們建立乙個物件來存放小球的資訊，圓心座標、半徑、角度等等。
var ball =function
drawball
(cxt,x,y)
小球運動的軌跡，我們就用乙個平拋來實現。
平拋運動大家都很熟悉，你需要知道的是水平初速度和垂直初速度還有加速度。這裡我們只是簡單的例子，所以並不會完全按照實際生活中的重力加速度來計算。
function update()
if( ball.x
< (ball.r))
if( ball.y
< (ball.r))
}
大家可能玩過憤怒的小鳥，在小鳥發射的時候會有一條小鳥經過的軌跡，那麼這些軌跡有事如何實現的呢？原理和我們小球運動是一樣的。不一樣的是我們需要清除畫布確保只有乙個小球，而軌跡則需要保留。那麼既然每次都會清除畫布重繪，怎麼樣才能保留運動軌跡的小球的？也很簡單我們只需要定義乙個陣列來存放每次的運動位置，在小球重繪的時候，使用for迴圈把軌跡重繪就行了。
主要的原理就這些，我這裡在畫布上還加了乙個橢圓 權當做乙個籃框，當小球座標在橢圓內的時候就相當於進了乙個球。
demo位址（厚顏無恥的我想要個星星）
canvas拋物線運動軌跡
本來是想做乙個貝塞爾曲線運動軌跡的 公式太複雜了，懶得算，公式在最後 我先畫了乙個拋物線，我確定了兩個點，起點 0,0 終點 200,200 用座標系可算出方程 y 0.005x 2 現在找出終點的切線與x軸的交點，那個就是貝塞爾曲線的第二個引數，控制點 求出是 100,0 現在重新繪製乙個動態曲線...
拋物線的精靈
拋物線 msprite 需要做拋物線的精靈 startpoint 起始位置 endpoint 中止位置 dirtime 起始位置到中止位置的所需時間 void movewithparabola ccsprite msprite startp cgpoint startpoint endp cgpoi...
js實現小球拋物線軌跡運動的兩種方式
js實現小球拋物軌跡運動的大致思路 1 用setinterval 方法，進行間隔性重新整理，更新小球位置，以實現動態效果 2 繪製小球和運動區域，運動區域可通過flex布局實現垂直居中 3 用物理公式s y 1 2 g t t，s x v x t來計算路徑 現確定v x 4m s,重新整理的時間間隔...