การวาดบนผ้าใบ HTML ต้องใช้ JavaScript ใช้ HTML DOM Method getElementById() และ getContext() ก่อนวาดบนผ้าใบ
สำหรับสิ่งนั้น ทำตามขั้นตอนบางอย่าง -
- คุณต้องใช้วิธี getElementById() เพื่อค้นหาองค์ประกอบผ้าใบ
- ใช้ getContext() ซึ่งเป็นอ็อบเจ็กต์การวาดสำหรับผืนผ้าใบ มีวิธีการและคุณสมบัติในการวาดภาพ
- หลังจากนั้นก็วาดบนผ้าใบ
ตัวอย่าง
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อวาดผ้าใบบน JavaScript -
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas</title>
</head>
<body>
<canvas id="newCanvas" width="400" height="250" style="border:2px solid #000000;"></canvas>
<script>
var canvas = document.getElementById("newCanvas");
var ctxt = canvas.getContext("2d");
ctxt.fillStyle = "#56A7E2";
ctxt.fillRect(0,0,250,120);
</script>
</body>
</html> 