如何用HTML5實現界面的徑向漸變效果
徑向漸變就是從起點到終點顏色從內到外進行圓形漸變(從內圓到外圓不斷變化的效果),使用徑向漸變可以實現一些網頁漂亮的界面特效如按鈕,導航圖片等
操作方法
(01)在網頁主體中定義一張畫布(大小,顏色等),在HTML5輸入JS代碼,加載網頁,並定義一隻畫筆如圖
(02)運行程序,如圖
(03)定義一個變量grd,在畫布中心爲150,起點爲0,半徑爲20,終點爲200的地方,創建一個徑向效果,如圖
(04)在起點爲0的地方設置徑向漸變爲“#000”
(05)在0.1處的地方設置徑向漸變爲“white”
(06)在0.2處的地方設置徑向漸變爲“#eee”
(07)在0.3處的地方設置徑向漸變爲“drakgray”
(08)填充徑向漸變效果,在起點爲0,終點爲800的地方坐圖,效果如圖
(09)運行程序,如圖完成!再加上顏色就好了!(是不是有一雙眼睛在盯着你)