Phương thức rect() của Canvas HTML

Giới thiệu

Phương thức rect() của HTML Canvas tạo một đường dẫn hình chữ nhật. Để thực sự vẽ và tô màu, cần gọi thêm stroke() (vẽ viền) hoặc fill() (tô màu). Lưu ý: fillRect() vẽ và tô ngay lập tức, còn rect() chỉ tạo đường dẫn.

Cú pháp

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

• x: Tọa độ x góc trên trái.
• y: Tọa độ y góc trên trái.
• width: Chiều rộng.
• height: Chiều cao.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="450" height="350" style="border:2px solid blue;">
    Trình duyệt không hỗ trợ canvas HTML5.
  </canvas>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // Hình chữ nhật ngoài (cam)
    ctx.beginPath();
    ctx.rect(100, 60, 200, 200);
    ctx.fillStyle = "orange";
    ctx.fill();
    // Hình chữ nhật trong (vàng)
    ctx.beginPath();
    ctx.rect(110, 90, 180, 120);
    ctx.fillStyle = "yellow";
    ctx.fill();
  </script>
</body>
</html>

Kết quả hiển thị

Hai hình chữ nhật lồng nhau: hình ngoài cam, hình trong vàng.