如何用HTML5實現界面的徑向漸變效果
- IT技術
- 關注:2.61W次
徑向漸變就是從起點到終點顏色從內到外進行圓形漸變(從內圓到外圓不斷變化的效果),使用徑向漸變可以實現一些網頁漂亮的界面特效如按鈕,導航圖片等
操作方法
(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)運行程序,如圖完成!再加上顏色就好了!(是不是有一雙眼睛在盯着你)
- 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/zh-hk/sm/itjishu/16945.html