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

1、設定線性漸變 語法

建立

var lineargrad = context.createlineargradient(startx, starty, endx, endy);
增加顏色
lineargrad.addcolorstop(0-1, 'color');
lineargrad.addcolorstop(0-1, 'color');
lineargrad.addcolorstop(0-1, 'color');
賦給填充樣式
fillstyle = lineargrad;
// 建立漸變
var linearg = ctx.createlineargradient(0, 0, 50, 1000);
// 新增顏色 0.0 - 1.0 之間
2. 徑向漸變
語法var radialgrand = context.createradialgradient(x1, y1, r1, x2, y2, r2);
x1: 第乙個圓的原點x座標
y1: 第乙個圓的原點y座標
r1: 第乙個圓的半徑
x2: 第二個圓的原點x座標
y2: 第二個圓的原點y座標
r2: 第二個圓的半徑
增加顏色
3. pattern(紋理填充)
可以將或另乙個canvas作為填充素材
語法：ctx.createpattern(img/canvas, repeat）
repeat: no-repeat | repeat-x | repeat-y | repeat
// pattern-

var img = new image();
img.src = './image/瓢蟲.jpg';
// 建立乙個新的canvas
var newcan = document.createelement(『canvas』);
newcan.width = 500;
newcan.height = 500;
var newctx = newcan.getcontext(『2d』);
var img2 = new image();

img2.src = './image/瓢蟲.jpg';
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線性漸變時間顯示（簡單特效）
附圖 原理 首先通過js獲取當前系統時間並建立乙個陣列將獲取到的時間中的時分秒解析出來儲存在陣列內 var time new date time a陣列用於儲存時分秒資料 var time a time.gethours time.getminutes time.getseconds 其次就是can...
canvas效果案例 貝塞爾曲線
繪製二次貝塞爾曲線 ctx.quadraticcurveto x1,y1,x,y 從上一點開始繪製一條二次曲線，到 x,y 為止，並且以 x1,y1 作為控制點 ctx.beginpath ctx.strokestyle green ctx.linewidth 4 起始點 ctx.moveto 10...