1.繪制線性漸變
Canvas提供了用於創建線性漸變的函數createLinearGradient（x0,y0,x1,y1）,坐標點（x0,y0）是起點 ，（x1,y1）是終點
創建一個漸變色
var gradient=createLinearGradient(0,0,300,0);
定義漸變色顏色
ctx.addColorStop(stop,color);
ctx.addColorStop(0,"#f00");
ctx.addColorStop(1,"#00f");
設置Canvas內容的fillStyle為當前的漸變對象，並且繪制這個圖形
1 ctx.fillStyle=gradient; //設置fillStyle為當前的漸變對象 2 ctx.fillRect(0,0,400,300); //繪制漸變圖形
一個線性漸變的圖形
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <canvas id="myCanvas"></canvas> 9 10 <script type="text/javascript"> 11 var canvas=document.getElementById("myCanvas"); 12 if(canvas && canvas.getContext){ 13 var ctx=canvas.getContext("2d"); 14 var grad=ctx.createLinearGradient(0,0,300,0); //創建一個漸變色線性對象 15 grad.addColorStop(0,"#f00"); //定義漸變色顏色 16 grad.addColorStop(1,"#00f"); 17 ctx.fillStyle=grad; //設置fillStyle為當前的漸變對象 18 ctx.fillRect(0,0,300,100); //繪制漸變圖形 19 } 20 </script> 21 </body> 22 </html>
顯示：
2.繪制徑向漸變：注意在繪制徑向漸變時，可能會因為Canvas的寬度或者高度設置不合適，導致徑向漸變顯示不完全，需要考慮調整Canvas的尺寸
創建一個沿兩個圓之間的錐面繪制漸變
createRadialGradient(x0,y0,r0,x1,y1,r1);
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <canvas id="myCanvas" width="400px" height="300px"></canvas> 9 10 <script type="text/javascript"> 11 var canvas=document.getElementById("myCanvas"); 12 if(canvas && canvas.getContext){ 13 var ctx=canvas.getContext("2d"); 14 var grad=ctx.createRadialGradient(200,200,50,200,200,200) //創建一個漸變色線性對象 15 grad.addColorStop(0,"#f00"); //定義漸變色顏色 16 grad.addColorStop(1,"#00f"); 17 ctx.fillStyle=grad; //設置fillStyle為當前的漸變對象 18 ctx.fillRect(0,0,400,400); //繪制漸變圖形 19 } 20 </script> 21 </body> 22 </html>
顯示