Canvas绘制渐变

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为当前的渐变对象，并且绘制这个图形

 ctx.fillStyle=gradient;         //设置fillStyle为当前的渐变对象
 ctx.fillRect(0,0,400,300);      //绘制渐变图形

一个线性渐变的图形

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
    <canvas id="myCanvas"></canvas>

    <script type="text/javascript">
        var canvas=document.getElementById("myCanvas");
        if(canvas && canvas.getContext){
            var ctx=canvas.getContext("2d");
            var grad=ctx.createLinearGradient(0,0,300,0); //创建一个渐变色线性对象
            grad.addColorStop(0,"#f00");                  //定义渐变色颜色
            grad.addColorStop(1,"#00f");
            ctx.fillStyle=grad;                         //设置fillStyle为当前的渐变对象
            ctx.fillRect(0,0,300,100);                    //绘制渐变图形
        }
    </script>
 </body>
 </html>

显示：

2.绘制径向渐变：注意在绘制径向渐变时，可能会因为Canvas的宽度或者高度设置不合适，导致径向渐变显示不完全，需要考虑调整Canvas的尺寸

创建一个沿两个圆之间的锥面绘制渐变

 createRadialGradient(x0,y0,r0,x1,y1,r1);

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
 <canvas id="myCanvas" width="400px" height="300px"></canvas>

 <script type="text/javascript">
     var canvas=document.getElementById("myCanvas");
     if(canvas && canvas.getContext){
         var ctx=canvas.getContext("2d");
         var grad=ctx.createRadialGradient(200,200,50,200,200,200) //创建一个渐变色线性对象
         grad.addColorStop(0,"#f00");                  //定义渐变色颜色
         grad.addColorStop(1,"#00f");
         ctx.fillStyle=grad;                         //设置fillStyle为当前的渐变对象
         ctx.fillRect(0,0,400,400);                    //绘制渐变图形
     }
 </script>
 </body>
 </html>

显示