关注我们

HTML5 中的 Create Gradients函数

HTML5 canvas允许无涯教程使用以下方法使用线性和径向渐变填充和描边形状-

No	方法和描述
1	addColorStop(offset，color) 此方法将具有给定颜色的色标添加到给定偏移处的渐变中。这里0.0是渐变一端的偏移量，1.0是另一端的偏移量。
2	createLinearGradient(x0，y0，x1，y1) 此方法返回一个CanvasGradient Object ，该 Object 表示一个线性渐变，该渐变沿着参数所表示的坐标给出的线进行绘制。这四个参数代表渐变的起点(x1，y1)和终点(x2，y2)。链接：https://www.learnfk.comhttps://www.learnfk.com/html5/canvas-create-gradients.html 来源：LearnFk无涯教程网
3	createRadialGradient(x0，y0，r0，x1，y1，r1) 此方法返回一个CanvasGradient Object ，该 Object 表示一个径向渐变，该渐变沿自变量表示的圆所给出的圆锥进行绘制。前三个自变量定义坐标为(x1，y1)且半径为r1的圆，第二个自变量定义坐标为(x2，y2)和半径r2的圆。

方法和描述

addColorStop(offset，color)

此方法将具有给定颜色的色标添加到给定偏移处的渐变中。这里0.0是渐变一端的偏移量，1.0是另一端的偏移量。

createLinearGradient(x0，y0，x1，y1)

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

链接：https://www.learnfk.comhttps://www.learnfk.com/html5/canvas-create-gradients.html

来源：LearnFk无涯教程网

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

此方法返回一个CanvasGradient Object ，该 Object 表示一个径向渐变，该渐变沿自变量表示的圆所给出的圆锥进行绘制。前三个自变量定义坐标为(x1，y1)且半径为r1的圆，第二个自变量定义坐标为(x2，y2)和半径r2的圆。

Linear Gradient 示例

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

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #test {
            width:100px;
            height:100px;
            margin:0px auto;
         }
      </style>
      
      <script type="text/javascript">
         function drawShape() {
            
            //使用 DOM 获取画布元素
            var canvas=document.getElementById('mycanvas');
            
            //连接数据库凭据
            if (canvas.getContext) {
               
               //确保不支持画布时不执行
               var ctx=canvas.getContext('2d');
               
               //创建线性渐变
               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)');
               
               //为填充和描边样式分配渐变
               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(){
             
            //使用 DOM 获取画布元素
            var canvas=document.getElementById('mycanvas');
             
            //连接数据库凭据
            if (canvas.getContext){
                
               //确保不支持画布时不执行
               var ctx=canvas.getContext('2d');
                
               //创建渐变
               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)');
                
               //绘制形状
               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>