canvas甜甜圈的編寫 · 小龍哥的前端博客

# canvas甜甜圈動畫效果的實現 > 前段時間，公司的老板說要個高大上的計算器，類似支付包的記賬的特效。看到這個效果后，就想到了canvas實現是最好的。 > * 主要用到的函數也就是arc函數這部可以參考之前寫的文章 [arc函數](http://www.hmoore.net/kingend/js-work/472267) * 實現的核心其實是增量，就是上次結束的弧度成為下次弧度的開始，便可以平滑過度。 * 關于動畫，有個實現原理，就是一秒最少要20fps。（fps是幀）一言不合貼的代碼： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>甜甜圈</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <canvas id="pan"></canvas> </body> <script> // 初始化函數 var pan = document.getElementById('pan') var width = window.outerWidth var height = window.outerHeight pan.width = width pan.height = height //繪畫狀態 let opts = { "start": Math.PI * 1.5, "end" : Math.PI * 3, "color": "red" } /** * 繪畫圓弧 * @param options 配置文件 */ function drawPie (opts) { /** * @param startAngle 開始弧度 * @param endAngle 結束弧度 * @param timeAngle 每次繪制的弧度的增量 * @param sumAngle 總的繪制的弧度 * @param initStartAngle 一開始弧度和總增量的和用于判斷是否繪畫完成 * @param vDraw 繪制的速度 50ms */ var startAngle = opts.start, endAngle = opts.end, timeAngle, sumAngle, initStartAngle, vDraw = 50; sumAngle = startAngle - endAngle if (sumAngle<0) { sumAngle = -sumAngle } initStartAngle = opts.start + sumAngle timeAngle = (sumAngle / 1000) * vDraw var ctx = pan.getContext("2d") // 弧度 = 角度 * Math.PI / 180 var timerHandle = setInterval(function () { /** * 應該獲取到上次的結束的弧度，作為下次開始的弧度 **/ ctx.arc(width / 2, height /2, 50, opts.start, opts.start + timeAngle, false ) ctx.strokeStyle=opts.color ctx.lineWidth= 40 ctx.stroke() // 判斷是否繪畫到需要的點 if(initStartAngle >= opts.start + timeAngle) { opts.start = opts.start + timeAngle } else { console.log('end') clearInterval(timerHandle) } }, vDraw) } drawPie(opts) </script> </html> ~~~ 后記：這個只是個簡單的demo,線條的優化等，還有定時函數的替代函數requestAnimationFrame，畢竟js是單線程，同時使用兩個高觸發的定時函數，是很危險的事情，一不小心就會照成瀏覽器卡頓。也可以使用worker技術，開啟多線程。不過我也沒有用worker技術參考資料： [js封裝緩動動畫](http://blog.csdn.net/qq_18972075/article/details/50018339) [知乎回答js平滑動畫效果的實現](https://www.zhihu.com/question/20453427)