JQuery 寫乙個圓形動畫載入進度條

2021-07-09 20:20:12 字數 1060 閱讀 7708

drawprocess()這個方法主要是畫圓的大小

上面所寫到的 setinterval("addnum(90,100)",20);  分別指的是:

1.這裡的三個引數分別是90:在90%處

2.100:圓的寬度(而標籤設定的高寬是不起作用的)

3.20:2秒之後執行這個addnum方法

createlineargradient() 方法建立線性的漸變物件。

漸變可用於填充矩形、圓形、線條、文字等等。

請使用該物件作為 strokestyle 或 fillstyle 屬性的值。

請使用 addcolorstop() 方法規定不同的顏色,以及在 gradient 物件中的何處定位顏色。

context.createlineargradient(x0,y0,x1,y1);
引數

描述x0

漸變開始點的 x 座標

y0漸變開始點的 y 座標

x1漸變結束點的 x 座標

y1漸變結束點的 y 座標

context.arc(x,y,r,sangle,eangle,counterclockwise);
引數描述x

圓的中心的 x 座標。

y圓的中心的 y 座標。

r圓的半徑。

sangle

起始角,以弧度計。(弧的圓形的三點鐘位置是 0 度)。

eangle

結束角,以弧度計。

counterclockwise

可選。規定應該逆時針還是順時針繪圖。false = 順時針,true = 逆時針。

如果想詳細學習html 的用法的話可以

React 寫乙個 spinner 圓形載入動畫

不支援ie和firefox,支援webkit瀏覽器。注意,在現代瀏覽器中需要使用 webkit 字首。geometry values clip path inset 100px 50px clip path circle 50px at 0 100px clip path polygon 50 0 ...

乙個簡單的CSS圓形縮放動畫

網易新聞的分享按鈕hover效果 新聞頁面 看了一下這兩個頁面的原始碼,主要是用了transform scale 和transition,自己的最終的實現效果如下 實現思路大體是模仿網易新聞的,布局如下 class third party third party weixin 複製 外層的a標籤用於...

CAShaplayer實現乙個載入動畫

思路 方法 建立乙個圖層,圖層要求圓形,可傳引數顏色 大小 方法 給圖層設定位置和整個載入動畫的大小 之後給其新增動畫,並且注意動畫的begintime要有間距 建立layer func createlayerwith size cgsize,color uicolor calayer let la...