HTML | canvas rect() 方法

HTML 中的rect()方法用于在 HTML 中创建一个矩形。

句法：

context.rect(x, y, width, height)

参数：

• x：它存储矩形左上角的 x 坐标。
• y：它存储矩形左上角的 y 坐标。
• 宽度：它以像素为单位存储宽度。
• 高度：它以像素为单位存储高度。

示例 1：

  

    
        HTML canvas rect() Method
    

  

    
  
  
    
        var x = 
            document.getElementById("GFG");
        var contex = 
            x.getContext("2d");
              
        // Create rectangle
        contex.rect(50, 50, 350, 200);
        contex.strokeStyle = "green";
        contex.lineWidth = "10";
        contex.stroke();
    
  

  

输出：

示例 2：

  

    
        HTML canvas rect() Method
    

  

    
  
  
    
        var x = 
            document.getElementById("GFG");
        var contex = 
            x.getContext("2d");
        contex.rect(50, 50, 350, 200);
  
        var x = document.getElementById("GFG");
        var contex = x.getContext("2d");
        contex.rect(100, 100, 250, 100);
        contex.strokeStyle = "green";
        contex.lineWidth = "10";
        contex.font = "30px Arial";
        contex.fillText("GeeksforGeeks", 120, 150);
        contex.stroke();
    

  

输出：

支持的浏览器：

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