問題背景:
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...