html5canvas繪制漸變圖形,HTML5 Canvas漸變圖形繪制[線性、徑向]

讓大家久等了，我們的漸變課程終于上演了，謝謝關注。

依照慣例，

如果您學習過之前的，你會覺得很親切的，因為在html5裡他們的名稱是一樣的。

我們一起來看代碼注釋講解

線性漸變文法

createLinearGradient(xStart,yStart,xEnd,yEnd);

漸變起點橫坐标：xStart，縱坐标：yStart；

漸變終點橫坐标：xEnd，縱坐标：yEnd；

來給漸變加入至少2個的Stop點吧

addColorStop(offset,color)

offset為0到1的浮點值，來定義漸變偏移量

color可支援16進制、rgb、rgba顔色

徑向漸變文法

CreateRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

開始圓心橫坐标：xStart，縱坐标：yStart，半徑：radiusStart；

結束圓心橫坐标：xEnd，縱坐标：yEnd，半徑：radiusEnd；

addColorStop(offset,color)

offset為0到1的浮點值，來定義漸變偏移量

color可支援16進制、rgb、rgba顔色

[javascript]

//得到畫布上下文，上節已講，在此不多說

var wh = document.getElementById("canvas");

function draw() {

canvas = document.getElementById("canvas");

if (canvas.getContext) { //檢測浏覽器是否相容

ctx = canvas.getContext("2d"); //你的canvas代碼在這裡

return ctx;

}

return null;

}

function CreateLinearGradient() {

var canvas = draw();

var grd = canvas.createLinearGradient(0, 0, 175, 50);

//支援這麼多種的顔色定義方式

grd.addColorStop(0, "#9CAAC1");

grd.addColorStop(0.3, "black");

grd.addColorStop(0.6, "rgb(255,255,0)");

grd.addColorStop(1, 'rgba(255,0,0,0.3)');

canvas.fillStyle = grd;

canvas.fillRect(0, 0, 275, 50);

}

function CreateRadialGradient() {

var canvas = draw();

canvas.strokeStyle = "blue";

canvas.lineWidth = 2;

canvas.beginPath();

var grd = canvas.createRadialGradient(120, 220, 0, 120, 220, 90);

grd.addColorStop(0, "#9CAAC1");

grd.addColorStop(0.3, "black");

grd.addColorStop(0.6, "rgb(255,255,0)");

grd.addColorStop(1, 'rgba(255,0,0,0.3)');

canvas.fillStyle = grd;

//arc(x,y,radius[半徑],startAngle[開始弧度],endAngle[結束弧度],anticlockwise[true順時針繪制,false逆時針繪制])

canvas.arc(120, 220, 100, 0, 2 * Math.PI, true);

canvas.closePath();

canvas.stroke();

canvas.fill();

}

function Ca() {

var canvas = draw();

canvas.clearRect(0, 0, wh.width, wh.height);

}