使用canvas繪制圓弧動畫

Kyxy 發布于2019-08-23 14:41 / 2793人閱讀

摘要：即，把放大為倍時，顯示效果會被拉伸當不設置樣式寬高時，瀏覽器中大小由畫布大小決定在實際開發中，碰到一個例外，是在使用時，繪制的標簽如果只設置畫布大小時，在移動端的瀏覽器上顯示異常，正常。回到圓弧動畫，當前動畫有兩段，以順時針方向這段為例。

效果預覽

canvas 繪制基本流程

初始畫布

對于canvas的繪制，首先需要在html內指定一塊畫布，即, 可以看做是在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上下文得到。


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...

云服務器 GPU云服務器圓弧動畫使用canvas畫圖漸變圓弧圓弧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100976.html

circle_clock 簡單canvas實現圓弧時鐘

摘要：渣渣成品圖最近對于圓形有種特別的感情呢因為寫了個就像到了用來做時鐘大概會比較有趣吧所以就著手寫了個這樣的一個東西大概代碼上錯漏還是蠻多的接下來分享下關于如何開發一個圓形時鐘條吧使用這次就沒有采用的方法來實現圓環了因為我想要做多層嵌套的圓環覺渣渣成品圖:http://codepen.io/thewindswor... 最近對于圓形有種特別的感情呢...因為寫了個cricle_proce...

boredream 2019-08-29 11:18 評論0 收藏0
circle_clock 簡單canvas實現圓弧時鐘

摘要：渣渣成品圖最近對于圓形有種特別的感情呢因為寫了個就像到了用來做時鐘大概會比較有趣吧所以就著手寫了個這樣的一個東西大概代碼上錯漏還是蠻多的接下來分享下關于如何開發一個圓形時鐘條吧使用這次就沒有采用的方法來實現圓環了因為我想要做多層嵌套的圓環覺渣渣成品圖:http://codepen.io/thewindswor... 最近對于圓形有種特別的感情呢...因為寫了個cricle_proce...

寵來也 2019-08-01 15:42 評論0 收藏0
circle_clock 簡單canvas實現圓弧時鐘

摘要：渣渣成品圖最近對于圓形有種特別的感情呢因為寫了個就像到了用來做時鐘大概會比較有趣吧所以就著手寫了個這樣的一個東西大概代碼上錯漏還是蠻多的接下來分享下關于如何開發一個圓形時鐘條吧使用這次就沒有采用的方法來實現圓環了因為我想要做多層嵌套的圓環覺渣渣成品圖:http://codepen.io/thewindswor... 最近對于圓形有種特別的感情呢...因為寫了個cricle_proce...

paney129 2019-08-22 10:38 評論0 收藏0
學習HTML5 Canvas這一篇文章就夠了

摘要：本文作者利用一些簡單的對進行了系統的總結，受益匪淺，毫不夸張的說，學習這一篇文章就夠了一簡介是新增的，一個可以使用腳本通常為在其中繪制圖像的元素。本文作者利用一些簡單的 demo 對 Canvas 進行了系統的總結，受益匪淺，毫不夸張的說，學習 Canvas 這一篇文章就夠了！一、canvas簡介 ? 是 HTML5 新增的，一個可以使用腳本(通常為JavaScript)在其中繪...

Eidesen 2019-08-26 12:12 評論0 收藏0