Cách vẽ đường thẳng bằng HTML5 Canvas

Thẻ <canvas> HTML5 dùng để vẽ đồ họa, hoạt ảnh qua scripting. Để vẽ đường thẳng, sử dụng phương thức lineTo().

Ví dụ

Mã sau minh họa vẽ các đường thẳng trên Canvas:

<!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');
      ctx.beginPath();
      ctx.moveTo(30, 30);
      ctx.lineTo(180, 100);
      ctx.moveTo(30, 10);
      ctx.lineTo(260, 100);
      ctx.stroke();
    </script>
  </body>
</html>

Lưu ý: moveTo(x, y) di chuyển bút vẽ đến tọa độ mới mà không vẽ đường, lineTo(x, y) vẽ đường từ vị trí hiện tại đến tọa độ mới.