酷知百科網

位置:首頁 > 遊戲數碼 > IT技術

如何用HTML5實現介面的徑向漸變效果

IT技術2.74W

徑向漸變就是從起點到終點顏色從內到外進行圓形漸變(從內圓到外圓不斷變化的效果),使用徑向漸變可以實現一些網頁漂亮的介面特效如按鈕,導航圖片等

如何用HTML5實現介面的徑向漸變效果

操作方法

(01)在網頁主體中定義一張畫布(大小,顏色等),在HTML5輸入JS程式碼,載入網頁,並定義一隻畫筆如圖

如何用HTML5實現介面的徑向漸變效果 第2張

(02)執行程式,如圖

如何用HTML5實現介面的徑向漸變效果 第3張

(03)定義一個變數grd,在畫布中心為150,起點為0,半徑為20,終點為200的地方,建立一個徑向效果,如圖

如何用HTML5實現介面的徑向漸變效果 第4張

(04)在起點為0的地方設定徑向漸變為“#000”

如何用HTML5實現介面的徑向漸變效果 第5張

(05)在0.1處的地方設定徑向漸變為“white”

如何用HTML5實現介面的徑向漸變效果 第6張

(06)在0.2處的地方設定徑向漸變為“#eee”

如何用HTML5實現介面的徑向漸變效果 第7張

(07)在0.3處的地方設定徑向漸變為“drakgray”

如何用HTML5實現介面的徑向漸變效果 第8張

(08)填充徑向漸變效果,在起點為0,終點為800的地方坐圖,效果如圖

如何用HTML5實現介面的徑向漸變效果 第9張

(09)執行程式,如圖完成!再加上顏色就好了!(是不是有一雙眼睛在盯著你)

如何用HTML5實現介面的徑向漸變效果 第10張