HTML canvas createLinearGradient()用法及代码示例

HTML画布createLinearGradient()方法用于创建线性渐变对象。渐变可用于在矩形，圆形，直线，文本等中填充不同的颜色。然后，我们可以将渐变颜色分配给strokeStyle或fillStyle属性，以填充或绘制矩形，圆形，直线，文本等形状。 addColorStop()方法添加不同的颜色，并将颜色放置在渐变对象中。

用法:：

context.createLinearGradient(x0, y0, x1, y1);

参数：：

x0:此参数指示渐变起点的x坐标。
y0:此参数指示渐变起点的y坐标。
x1:此参数指示渐变终点的x坐标。
y1:此参数指示渐变终点的y坐标。

例子1：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      HTML canvas  
      createLinearGradient() Method 
  </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
        <h2> 
          HTML canvas  
          createLinearGradient() Method 
      </h2> 
        <canvas id="myCanvas" 
                width="350"
                height="180"> 
        </canvas> 
        <script> 
            var a = document.getElementById( 
              "myCanvas"); 
            var gctx = a.getContext("2d"); 
            var clg = 
                gctx.createLinearGradient( 
                  100, 150, 200, 120); 
            
            clg.addColorStop(0, "yellow"); 
            clg.addColorStop(1, "pink"); 
            gctx.fillStyle = clg; 
            gctx.fillRect(80, 20, 200, 110); 
        </script> 
    </center> 
</body> 
  
</html>

输出：

范例2：

<!DOCTYPE HTML> 
  
<html> 
  
<head> 
    <title> 
        HTML canvas createLinearGradient() Method 
    </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
        <h2> 
          HTML canvas  
          createLinearGradient() Method 
      </h2> 
        <canvas id="mycanvas"></canvas> 
        <script> 
            var canvas = document.getElementById('mycanvas'); 
  
            var ctx = canvas.getContext('2d'); 
  
            var lingrad = ctx.createLinearGradient(0, 0, 0, 150); 
  
            lingrad.addColorStop(0, '#00AB3B'); 
            lingrad.addColorStop(0.5, '#45ec3f'); 
  
            lingrad.addColorStop(0.5, '#66CC20'); 
            lingrad.addColorStop(1, '#f3f'); 
  
            ctx.fillStyle = lingrad; 
  
            // draw shape 
            ctx.fillRect(10, 10, 130, 130); 
        </script> 
    </center> 
</body> 
  
</html>

输出：

支持的浏览器：下面列出了画布createLinearGradient()方法支持的浏览器：

谷歌浏览器
Internet Explorer 9.0
火狐浏览器
苹果Safari
Opera

相关用法

注：本文由纯净天空筛选整理自IshwarGupta大神的英文原创作品 HTML | canvas createLinearGradient() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。