使用canvas繪製圓弧動畫

效果預覽

canvas 繪製基本流程

初始畫布

對於canvas的繪製，首先須要在html內指定一塊畫布，即<canvas></canvas>, 能夠看作是在PS中新建一個空白文檔，以後全部的操做都將呈如今這個文檔之上，與PS的區別是，canvas自己沒有圖層的特性，當須要展現不一樣維度的視圖時，須要交由html的位置關係來解決。

canvas標籤上，值得一提的就是width和height兩個屬性，這兩個屬性表明着畫布的寬高，與canvas樣式上的寬高有很大區別。在瀏覽器當中，看到的圖形繪製大小，自己是由canvas.style.width/canvas.style.height決定的，他們決定了canvas這個dom元素的大小關係，而canvas.width和canvas.height決定的是canvas內部圖形的大小關係。當這兩個寬高比不一樣時，就會產生視覺上的形變。即，把canvas.style.height放大爲2倍時，顯示效果會被拉伸：

當不設置樣式寬高時，瀏覽器中canvas大小由畫布大小決定(在實際開發中，碰到一個例外，是在使用mapbox時，繪製map的標籤若是隻設置canvas畫布大小時，在ios移動端的瀏覽器上顯示異常，PC正常)。

獲取上下文

所謂上下文，表明的就是一個環境，在這個環境當中你能夠獲取到相關的方法，變量。程序中有上下文，html的媒體中也有上下文，好比音頻上下文（AudioContext）,只有拿到了上下文，才能進行相關的方法操做，canvas也是如此，canvas上的方法都是藉由canvas上下文獲得。

<canvas id="leftCanvas"></canvas>
const canvasL = document.getElementById("leftCanvas");
const cxtL = canvasL.getContext("2d");

配置線條

本次圓弧動畫須要用到的上下文屬性有：

• lineCap 線段端點形狀，本次設置爲round
• lineWidth 線寬
• strokeStyle 線條填充顏色
• clearRect 清除畫布裏面的內容
• beginPath 在畫布上開始一段新的路徑
• arc 圓弧繪製參數配置
• stroke 繪製

角度計算

角度計算以前，先介紹一下繪製圓弧的基礎api arc。

ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

這個函數能夠接收6個參數，前五個爲必填，分別爲圓心x座標，圓心y座標，半徑，起始角度，結束角度，方向（默認爲false,順時針）。

回到圓弧動畫，當前動畫有兩段，以順時針方向這段爲例。

• x, y:在canvas當中，座標系默認以左上角爲原點，若是想讓圓弧動畫以畫布中心點旋轉，能夠將圓心點設置爲畫布中心點，即畫布長寬的1/2,假設設置的畫布長寬均爲100，那麼圓心點的座標即爲(50, 50)，這個圓就繪製在了畫布中間。
• radius:爲了避免與畫布產生切角，半徑設置比畫布通常略小，。
• startAngle:起始角度爲正北方向，而圓以x軸水平方向爲0度，所以將起始點逆時針旋轉90°，即：-1 / 2 * Math.PI。
• endAngle:由於圓弧長度爲30°，終點角度在起始角度的基礎上增長 1 / 6 * Math.PI。

順時針方向圓弧初始配置爲：

cxtL.arc(WidthL / 2, HeightL / 2, WidthL / 2 - 5, -1 / 2 * Math.PI, 1 / 6 * Math.PI, false);

開啓動畫

window.requestAnimationFrame()

藉助requestAnimationFrame，來對canvas圓弧進行不斷的重繪，每次重繪canvas以前清空畫布，每輪動畫方向角偏移2°，即2 / 180 * Math.PI，動畫結束的標記爲圓弧終點的角度，移動至3 / 2 * Math.PI，當知足條件時，調用window.cancelAnimationFrame(animationId)取消動畫。

屏幕適配

經過進入html後，動態獲取視口，來設置canvas寬高，好比但願畫布大小爲窗口的寬度的15%，能夠經過

const clientWidth = document.documentElement.clientWidth;
const canvasWidth = Math.floor(clientWidth * 0.15);
const canvasL = document.getElementById("leftCanvas");
canvasL.setAttribute("width", canvasWidth + "px");

這樣就可使畫布適應不一樣屏幕大小。

如下爲未整理代碼，較亂，僅供參考。

https://codepen.io/jbleach/pe...