创建渐变（Create Gradients）

优质

小牛编辑

135浏览

2023-12-01

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

Sr.No.	方法和描述
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的圆。

Sr.No.

方法和描述

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>