วิธีวาดเส้นตรงบน HTML5 Canvas

บทนำ

แท็ก <canvas> ของ HTML5 ใช้สำหรับวาดกราฟิกผ่าน JavaScript ใช้เมธอด lineTo(x, y) เพื่อวาดเส้นตรงจากจุดปัจจุบันไปยังจุดที่กำหนด

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas Lines</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>

คำอธิบายเมธอดหลัก

• beginPath() - เริ่มเส้นทางใหม่
• moveTo(x, y) - ย้ายจุดเริ่มต้นโดยไม่วาดเส้น
• lineTo(x, y) - วาดเส้นตรงจากจุดปัจจุบันไปยังจุด (x, y)
• stroke() - วาดเส้นทางที่กำหนดจริงๆ