Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Làm thế nào để vẽ một hình chữ nhật trên HTML5 Canvas?

Thẻ HTML5 được sử dụng để vẽ đồ họa, hoạt ảnh, v.v. bằng cách sử dụng tập lệnh. Đây là một thẻ mới được giới thiệu trong HTML5. Phần tử canvas có một phương thức DOM được gọi là getContext, phương thức này nhận được ngữ cảnh kết xuất và các chức năng vẽ của nó. Hàm này nhận một tham số, loại ngữ cảnh 2d.

Để vẽ hình chữ nhật bằng canvas HTML5, hãy sử dụng phương thức fillRect (x, y, width, height):

Làm thế nào để vẽ một hình chữ nhật trên HTML5 Canvas?

Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách vẽ hình chữ nhật bằng HTML5 Canvas

Ví dụ 

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   
   <body>
      <canvas id="newCanvas" width="200" height="100" style="border:1px
         solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#7cce2b';
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>

Đầu ra

Làm thế nào để vẽ một hình chữ nhật trên HTML5 Canvas?