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

2021-09-24 02:00:48 字數 813 閱讀 8180

var b = a.getcontext(「2d」);

var grd = b.createradialgradient(75,50,5,90,60,100);//徑向漸變,

引數值引數 描述

x0 漸變開始點的 x 座標

y0 漸變開始點的 y 座標

x1 漸變結束點的 x 座標

y1 漸變結束點的 y 座標

同上;addcolorstop(stop,color);stop 介於 0.0 與 1.0 之間的值,//表示漸變中開始與結束之間的位置。//color 在結束位置顯示的 css 顏色值

或scale(sx, sy)

值節sx

,表示縮放向量的橫座標。

sy,表示縮放向量的縱座標。如果未設定,則他的預設值被設定為 sx。 從而使得元素在保持原有形狀下均等縮放

rotate(angle)

旋轉的角度;順時針;

線性漸變和徑向漸變

linear gradient direction,color 寫法 background webkit linear gradient direction,color 1.direction 方向,預設方向是自上而下 寫法有 1.background webkit linear gradient ...

線性漸變和徑向漸變

格式 background image linear gradient 方向,起始顏色 終止顏色 方向 to left to right to top to bottom 角度 360 180 45 從左下到右上 90 相當於 to right 從左到右 135 從左上到右下 180 從上到下 di...

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

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