settimeout(fn,time) 和setinterval(fn,time)
優點：使用方便，動畫的時間間隔可以自定義。
缺點：隱藏瀏覽器標籤後，會依舊執行，造成資源浪費。與瀏覽器重新整理頻率不同步。
requestanimationframe(fn)
優點：效能更優良。隱藏瀏覽器標籤後，便不會執行。與瀏覽器重新整理頻率同步。
缺點：動畫的時間間隔無法自定義
勻速運動
加速運動：
請求動畫幀裡的時間差
請求動畫幀裡的時間差是參差不齊的。比如第一次用16 毫秒驅動了動畫，下一次可能是20毫秒，下下次可能是17 毫秒。
常見的誤區：
比如：超人第一秒跑了100 公尺，第二秒內也跑了一百公尺，第三秒內跑了一百公尺，但是這並不是真正的勻速運動，雖然這樣算出來的平均速率是100m/s。
但是定義勻速運動與否的單位是平均速度（區別與勻速率）正確的勻速運動應該是超人一直以100m/s的速度運動，第一秒跑了一百公尺，第二秒跑了一百公尺 。。。。。。
從小球落地的事件中解析彈性運動
初始資料
速度：vy=0
加速度（重力）：ay=0.01
彈力：bounce=0.8
動畫幀中：
vy+=ay
ball.y+=vy
碰撞地面時：
補間動畫是在兩個關鍵幀之間，以某種演算法自動計算物體運動的插值，從而形成一種過度效果。
用tween.js 做補間
顏色補間動畫
tween.js 並沒有提供顏色的過度方法，所以我把d3 的color 外掛程式拼裝到了tween.js 中去，形成了乙個suptween.js，使用之前需要引入
新增互動
canvas 圖形沒有監聽事件的方法。
比如用滑鼠選擇圖形時，我們只能用canvas 畫布監聽事件，獲取滑鼠或觸控點在canvas 中的位置，再基於圖形在canvas 中的位置和形狀，判斷滑鼠在canvas中的點位是否在圖形中。
獲取canvas 中滑鼠位置的方法
canvas.
addeventlistener
('mousedown'
, getpos)
;function
getpos
(event)
=event;
const
=canvas.
getboundingclientrect()
;const
[x,y]
=[clientx-left,clienty-top]
; console.
log(x,y)
;}
canvas.
addeventlistener
('mousedown'
, getpos)
;function
getpos
(event)
=event.changedtouches[0]
;const
=canvas.
getboundingclientrect()
;const
[x,y]
=[pagex -left, pagey -top]
; console.
log(x,y)
;}
ispointinpath(x,y) 面向的物件是路徑，所以對文字、fillrect()、strokerect()不好使。
回顧一下路徑的基本概念：在我們使用canvas 的getcontext(『2d』) 方法獲取canvas 上下文物件ctx 的時候， ctx上便掛載了乙個空的路徑集合。在ctx.beginpath() 之後，所繪製的所有路徑都會被新增到這個路徑集合裡，ispointinpath(x,y) 方法判斷的就是x、y 點是否在這個路徑集合的所有路徑裡。這個路徑可以不用畫出來，只要路徑集合裡有路徑即可。注意，在下一次ctx.beginpath() 時，路徑集合會被置空。
示例：用三個點畫了一條折線，沒有將其閉合，然後對其進行選擇。
總結：動畫是畫素在時間中的舞蹈。無論多麼炫酷的動畫，它都是在改變螢幕中畫素的位置和色彩。
動畫可以應用於canvas 圖形的位置、旋轉、縮放和樣式。
動畫的製作方式有兩種：逐幀動畫和補間動畫。
逐幀動畫只會考慮下一幀。
補間動畫在動畫的開始就已經知道了動畫的結尾，只是動畫的過程會有各自的精彩。
canvas動畫時鐘
在html 中，插入canvas標籤 設定canvas的css樣式 position absolute left 50 top 50 transform translate 50 50 寫入了兩個畫布，乙個是為了畫靜態的表盤，另乙個是為了畫動態的指標 在js中建立畫布，進行相關的初始化設定 var ...
canvas動畫迴圈
動畫迴圈是製作動畫效果的基礎，由3個部分組成。先後是更新操作，清楚操作，繪製操作，並且會不斷重複的進行。如下有demo 有助於更好地理解.var canvas document.getelementbyid canvas var context canvas.getcontext 2d var ci...
canvas動畫時鐘
最近在學canvas，然後根據mdn上的例子做了個動畫時鐘 為什麼要造個輪子，因為醜。這是mdn上的例子，怎麼說呢，比較復古吧。首先，找一張時鐘的，就是下面這張了。來自bigger than bigger的dribbble 侵刪 然後就開始用canvas實現這個逼格滿滿的時鐘吧。在html 中插入c...