前言：
此事例是在vue組件中，使用canvas實現倒計時動畫的效果。其實，實現效果的邏輯跟vue沒有關系，只要讀懂canvas如何實現效果的這部分邏輯就可以了
canvas動畫的原理：利用定時器，給定合理的幀數，不斷的清除畫布，再重繪圖形，即呈現出動畫效果。
讓我們先看下效果
說明：此gif清晰度很低，因為轉成gif圖的時候，質量受損，幀數減少，所以倒計時轉到紅色時候看起來變的很模糊。但是實際在瀏覽器上效果全程都是很清晰和連貫的
使用
npm
npm install vue-canvas-countdown --save-dev
es6 import
import countDown from 'vue-canvas-countdown'
源碼、demo、使用方法請參考github：https://github.com/Damon0820/vue-countdown
左手右手一個慢動作
說明：扇形顏色是漸變的（仔細看圖：扇形逆時針方向漸變顏色，內側淺，外側深）
動畫步驟分析：假如設定倒計時總時間為15s， 變黃色時機為10s，變紅色時機為5s。
1、開始倒計時后顏色為綠色。綠色含義是：倒計時的時間離結束時間還很長。
2、10s后變黃色。黃色的含義是：倒計時的時間離結束時間挺近了，起警告作用。動畫中，出現快速旋轉的扇形。
3、5s后變紅色。紅色的含義是：倒計時的時間馬上就要結束了，起強烈警告作用。動畫中，快速旋轉的扇形速度加快。
4、0s倒計時結束。動畫消失。靜態圓形框中顯示提示文字。
修煉js寶典，get canvas技能
之前對於canvas一竅不通，網上查了資料，介紹api的時候過於簡單，也不好理解，看別人寫的示例代碼，更是懵逼。而后，回歸原始，修煉經典的《JavaScript高級程序設計》這本js寶典。書本二三十頁的介紹canvas部分，系統的學習了一下。邊看邊寫效果，20多頁的書看完了，效果也寫出來了。對於新手，我推薦找到系統介紹canvas的資料，先花一兩個先熟悉下canvas的api，然后實現效果就是分分鍾的事了