Cách vẽ đường thẳng với lineTo() trong HTML5

Để vẽ đường thẳng trong HTML, sử dụng phần tử canvas. Với canvas, dùng phương thức lineTo() để vẽ đường thẳng. Phương thức này nhận tham số x và y xác định vị trí điểm kết thúc của đường thẳng.

Ví dụ

Bạn có thể chạy mã sau để vẽ đường thẳng với lineTo() trong HTML5:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Canvas</title>
  </head>
  <body>
    <canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
    <script>
      var c = document.getElementById("newCanvas");
      var ctxt = c.getContext("2d");
      ctxt.beginPath();
      ctxt.moveTo(70, 50);
      ctxt.lineTo(50, 120);
      ctxt.stroke();
    </script>
  </body>
</html>