HTML | canvas quadraticCurveTo() 方法

canvas quadraticCurveTo() 方法用于在画布上创建二次曲线。该方法通过使用表示二次参数曲线的指定控制点向当前路径添加一个点。

句法：

context.quadraticCurveTo( cx, cy, x, y );

参数：

• cx：此参数保存二次控制点的 x 坐标。
• cy：此参数保存二次控制点的 y 坐标。
• x：此参数指定终点的 x 坐标。
• y：该参数指定终点的 y 坐标。

示例 1：

      
 
     
        HTML canvas quadraticCurveTo() Method
     
 
  
 
      
    
        GeeksforGeeks
     
      
    HTML canvas quadraticCurveTo() Method 
      
     
      
    
        var geeks = document.getElementById('GFG');
        var context = geeks.getContext('2d');
        context.beginPath();
        context.moveTo(88, 120);
        context.quadraticCurveTo(288, 0, 388, 150);
        context.strokeStyle = 'green';
        context.stroke();
    
 
  
                          

输出：

示例 2 ：

      
 
     
        HTML canvas quadraticCurveTo() Method
     
 
  
 
      
    
        GeeksforGeeks
     
      
    HTML canvas quadraticCurveTo() Method 
      
     
      
    
        var geeks = document.getElementById('GFG');
        var context = geeks.getContext('2d');
        context.beginPath();
        context.moveTo(50, 50);
        context.quadraticCurveTo(50, 180, 340, 50);
        context.strokeStyle = 'green';
        context.lineWidth = 5;
        context.stroke();
    
 
  
                              

输出：

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

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