使用canvas繪製環形漸變色進度條

2021-10-10 22:21:47 字數 727 閱讀 8726

問題背景:

1 實現環形漸變【顏色是均勻的】

2 要有動畫進度【時間要可控】

3 弧形邊要順滑【不能有明顯的毛刺。產品上線後被提了這個bug :d】

4 要有背景色

**實現方法:

1 使用canvas畫,主要思路是把整個圓弧分隔成n多個小弧線,每個小弧使用不同的顏色描邊

2 不同的顏色來自於一條漸變色條,漸變色條取色方式來自於網上搜尋,暫時找不到原始位址了,抱歉。其思路是畫一條漸變色的色帶,根據百分比提取色帶上對應的顏色值,然後畫到弧線上

3 使用的是canvas的arcto方法。【arc方法也可以】

4 為了減少毛刺,把canvas寬高增加到原來的n倍(n為正整數,比如2,4,6。1就是預設毛刺很多的值,不推薦。推薦2或者4)。然後用圖形變換把整個畫布縮小到1/n(使用transform:scale(0.5)或者0.25)

5 動畫,使用了requestanimitionframe

效果大約是上邊的樣子。

*如果使用中再發現問題,會逐步修正

**位址 

canvas繪製之漸變色

一漸變色分為線性漸變和放射漸變 2d繪製環境通過呼叫 線性漸變 createlinegradient x,y,width,height 放射漸變 createradialgradient x0,y0,r0,x1,y1,r2 x0,y0是起始點座標r0是半徑範圍 二 示例 created by adm...

繪製漸變色

迴圈改變的畫素值,請注意每一行使用乙個顏色。int data new int fontimage.getwidth fontimage.getheight fontimage.getrgb data,0,fontimage.getwidth 0,0,fontimage.getwidth fontim...

QMl中的Canvas使用漸變色

qml中的canvas在繪製圖形是,可以設定漸變色。context2d中的createlineargradient 建立乙個線性漸變物件,createradialgradient 建立乙個放射性漸變物件,這個漸變物件的型別為canvasgradient。canvasgradient通過addcolo...