帆布 - 漸變
梯度可用於填充矩形，圓形，線條，文字等在畫布上的形狀不限於純色。
有兩種不同類型的梯度的：
- createLinearGradient（ x,y,x1,y1 ） -創建的線性梯度
- createRadialGradient（ x,y,r,x1,y1,r1 ） -創建徑向/環形梯度
一旦我們有一個漸變對象，我們必須添加兩種或兩種以上的顏色停止。
該addColorStop()方法指定顏色停止，其沿著漸變的位置。 梯度的位置可以是0到1之間的任何地方。
要使用漸變的填充樣式或的StrokeStyle屬性設置為漸變，然後繪製形狀(rectangle, text, or a line) 。
使用createLinearGradient()
例
創建的線性梯度。 填充矩形與梯度：
JavaScript的：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); 試一試» 使用createRadialGradient()
例
創建一個徑向/圓形漸變。 填充矩形與梯度：
JavaScript的：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); 試一試»