HTML |画布 arcTo() 方法

画布 arcTo() 方法用于在画布上的两条切线之间创建圆弧/曲线。该方法在直线或其他图形的延长线上定义圆弧。这种方法通常用于创建圆角。

句法：

context.arcTo( x1, y1, x2, y2, r );

参数：

• x1：此参数指定第一个切线的 x 坐标。
• y1：此参数指定第一条切线的 y 坐标。
• x2：此参数指定第二条切线的 x 坐标。
• y2：此参数指定第二条切线的 y 坐标。
• r：此参数指定圆弧的半径。

示例 1：

  

    
        HTML canvas arcTo() Method
    

  

      
    GeeksforGeeks
      
    HTML canvas arcTo() Method
      
    
    
      
    
        var doc_id = document.getElementById("GFG");
        var context = doc_id.getContext("2d");
        context.beginPath();
        context.strokeStyle = 'green';
        context.lineWidth = 6;
        context.moveTo(200, 30);
        context.arcTo(100, 30, 100, 50, 50);
        context.stroke();
    

  

输出：

示例 2：

  

    
        HTML canvas arcTo() Method
    

  

      
    GeeksforGeeks
      
    HTML canvas arcTo() Method
      
    
    
      
    
        var doc_id = document.getElementById("GFG");
        var context = doc_id.getContext("2d");
        context.beginPath();
        context.strokeStyle = 'green';
        context.lineWidth = 3;
        context.moveTo(60, 60);
        context.arcTo(250, 60, 250, 110, 50);
        context.stroke();
    

  

输出：

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

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