เพื่อวาดเส้นตรงใน HTML ใช้ Canvas element ร่วมกับเมธอด lineTo() ซึ่งรับพารามิเตอร์ x และ y สำหรับตำแหน่งปลายเส้น
ตัวอย่าง
<!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>
ขั้นตอน: 1) beginPath() เริ่มเส้นทาง 2) moveTo(x,y) ย้ายจุดเริ่มต้น 3) lineTo(x,y) วาดเส้นไปจุดหมาย 4) stroke() แสดงเส้นจริง
