HTML |画布 createLinearGradient() 方法

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

语法: :

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

参数：：

1. x0：该参数表示渐变起点的 x 坐标。
2. y0：该参数表示渐变起点的y坐标。
3. x1：该参数表示渐变终点的x坐标。
4. y1：该参数表示渐变终点的y坐标。

示例 1 ：

  

    
      HTML canvas 
      createLinearGradient() Method
  

  

    
        
          GeeksforGeeks
      
        
          HTML canvas 
          createLinearGradient() Method
      
        
        
        
            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);
        
    

  

输出：

示例 2：

  

  

    
        HTML canvas createLinearGradient() Method
    

  

    
        
          GeeksforGeeks
      
        
          HTML canvas 
          createLinearGradient() Method
      
        
        
            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);
        
    

  

输出：

支持的浏览器： canvas createLinearGradient() 方法支持的浏览器如下：

• 谷歌浏览器
• 浏览器 9.0
• 火狐
• 苹果Safari
• 歌剧