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

canvas漸變分為兩種 ,下面進行對線性漸變的講解:

.線性漸變;

用法:

createlineargradient(x1,y1,x2,y2)

新增顏色:

grad.addcolorstop(位置,顏色) 位置表示顏色的停止位置

注意:

在新增顏色得時候,「位置」,由0-1之間得數字填寫,"顏色"需要用雙引號或者單引號包裹起來作為乙個字串使用;

引數值:

x1:起點的 橫座標x1。
y1:起點的 縱座標y1。
x2:終點的 橫座標x2。
y2:終點的 縱座標y2。
注意:x1,y1組合來使用表示起點位置的座標;
x2,y2組合來使用表示終點位置的座標;

實現效果如下圖所示:

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中的漸變

createlineargradient x1,y1,x2,y2 表示漸變的起點 x1,y1 與終點 x2,y2 gradient.addcolorstop position,color gradient createlineargradient的返回值 addcolorstop 方法接受 2 個引...

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

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