Computer >> Máy Tính >  >> Lập trình >> HTML

Làm thế nào để vẽ các đường bằng 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. Sử dụng phương thức lineTo () để vẽ các đường bằng canvas HTML5.

Làm thế nào để vẽ các đường bằng HTML5 Canvas?

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

Ví dụ

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>

   <body>
      <canvas id="newCanvas" width="400" height="300" style="border:1px
         solid #000000;"></canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');

         // Drawing lines
         ctx.beginPath();
         ctx.moveTo(30, 30);
         ctx.lineTo(180, 100);
         ctx.moveTo(30, 10);
         ctx.lineTo(260, 100);
         ctx.stroke();
      </script>
   </body>
</html>

Đầu ra

Làm thế nào để vẽ các đường bằng HTML5 Canvas?