Canvas線性漸變時間顯示（簡單特效）

附圖

原理

首先通過js獲取當前系統時間並建立乙個陣列將獲取到的時間中的時分秒解析出來儲存在陣列內；

var time=new date();

//time_a陣列用於儲存時分秒資料
var time_a =[time.gethours(),time.getminutes(),time.getseconds()];

注：採用jquery純屬個人喜好，此專案jquery用處不大，可自行用js**代替。

html**：

您的瀏覽器不支援canvas

$(function () 

play();
setinterval(play,1000);//每一秒重新整理一次
});

canvas中的線性漸變和徑向漸變

var b a.getcontext 2d var grd b.createradialgradient 75,50,5,90,60,100 徑向漸變，引數值引數 描述 x0 漸變開始點的 x 座標 y0 漸變開始點的 y 座標 x1 漸變結束點的 x 座標 y1 漸變結束點的 y 座標 同上 ad...

canvas效果案例 線性漸變 徑向漸變及紋理

1 設定線性漸變 語法 建立 var lineargrad context.createlineargradient startx,starty,endx,endy 增加顏色 lineargrad.addcolorstop 0 1,color lineargrad.addcolorstop 0 1,...

HTML中canvas線性漸變的使用方法

canvas漸變分為兩種 下面進行對線性漸變的講解 線性漸變 用法 createlineargradient x1,y1,x2,y2 新增顏色 grad.addcolorstop 位置,顏色 位置表示顏色的停止位置 注意 在新增顏色得時候,位置 由0 1之間得數字填寫,顏色 需要用雙引號或者單引號包...