HTML5 Canvas - 创建渐变

HTML5 canvas允许我们使用以下方法使用线性渐变和径向渐变填充和描边形状：

序号	方法和描述
1	addColorStop(offset, color) 此方法在给定偏移量的渐变中添加具有给定颜色的颜色停止点。此处 0.0 是渐变一端的偏移量，1.0 是另一端的偏移量。
2	createLinearGradient(x0, y0, x1, y1) 此方法返回一个 CanvasGradient 对象，该对象表示一个线性渐变，沿着参数表示的坐标给出的线进行绘制。四个参数分别表示渐变的起点 (x1,y1) 和终点 (x2,y2)。
3	createRadialGradient(x0, y0, r0, x1, y1, r1) 此方法返回一个 CanvasGradient 对象，该对象表示一个径向渐变，沿着参数表示的圆锥进行绘制。前三个参数定义一个坐标为 (x1,y1) 半径为 r1 的圆，后三个参数定义一个坐标为 (x2,y2) 半径为 r2 的圆。

序号

方法和描述

addColorStop(offset, color)

此方法在给定偏移量的渐变中添加具有给定颜色的颜色停止点。此处 0.0 是渐变一端的偏移量，1.0 是另一端的偏移量。

createLinearGradient(x0, y0, x1, y1)

此方法返回一个 CanvasGradient 对象，该对象表示一个线性渐变，沿着参数表示的坐标给出的线进行绘制。四个参数分别表示渐变的起点 (x1,y1) 和终点 (x2,y2)。

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

此方法返回一个 CanvasGradient 对象，该对象表示一个径向渐变，沿着参数表示的圆锥进行绘制。前三个参数定义一个坐标为 (x1,y1) 半径为 r1 的圆，后三个参数定义一个坐标为 (x2,y2) 半径为 r2 的圆。

线性渐变示例

以下是一个简单的示例，它使用上述方法创建线性渐变。

在线演示

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #test {
            width:100px;
            height:100px;
            margin:0px auto;
         }
      </style>
      
      <script type = "text/javascript">
         function drawShape() {
            
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');
            
            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {
               
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               
               // Create Linear Gradients
               var lingrad = ctx.createLinearGradient(0,0,0,150);
               
               lingrad.addColorStop(0, '#00ABEB');
               lingrad.addColorStop(0.5, '#fff');
               
               lingrad.addColorStop(0.5, '#66CC00');
               lingrad.addColorStop(1, '#fff');
               
               var lingrad2 = ctx.createLinearGradient(0,50,0,95);
               lingrad2.addColorStop(0.5, '#000');
               lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
               
               // assign gradients to fill and stroke styles
               ctx.fillStyle = lingrad;
               ctx.strokeStyle = lingrad2;
               
               // draw shapes
               ctx.fillRect(10,10,130,130);
               ctx.strokeRect(50,50,50,50);
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
   
</html>

以上示例将产生以下结果：

径向渐变示例

以下是一个简单的示例，它使用上述方法创建径向渐变。

在线演示

<!DOCTYPE HTML>
<html>
   <head>
      
      <style>
         #test {
            width:100px;
            height:100px;
            margin:0px auto;
         }
       </style>
       
       <script type = "text/javascript">
         function drawShape(){
             
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');
             
            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext){
                
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
                
               // Create gradients
               var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
               radgrad.addColorStop(0, '#A7D30C');
               radgrad.addColorStop(0.9, '#019F62');
               radgrad.addColorStop(1, 'rgba(1,159,98,0)');
                
               var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
               radgrad2.addColorStop(0, '#FF5F98');
               radgrad2.addColorStop(0.75, '#FF0188');
               radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
                
               var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
               radgrad3.addColorStop(0, '#00C9FF');
               radgrad3.addColorStop(0.8, '#00B5E2');
               radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
                
               var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
               radgrad4.addColorStop(0, '#F4F201');
               radgrad4.addColorStop(0.8, '#E4C700');
               radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
                
               // draw shapes
               ctx.fillStyle = radgrad4;
               ctx.fillRect(0,0,150,150);
                
               ctx.fillStyle = radgrad3;
               ctx.fillRect(0,0,150,150);
                
               ctx.fillStyle = radgrad2;
               ctx.fillRect(0,0,150,150);
                
               ctx.fillStyle = radgrad;
               ctx.fillRect(0,0,150,150);
            }
             
            else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
    
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
</html>

以上示例将产生以下结果：

html5_canvas.htm

打印页面