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>
显示