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 的圆。

线性渐变示例

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

在线演示 
<!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
打印页面
上一页
下一页
广告