การวาด Canvas HTML
- หน้าก่อน คำอธิบาย Canvas
- หน้าต่อไป ตำแหน่ง Canvas
วาดบนกระดานวาดด้วย JavaScript
ทุกการวาดบนกระดานวาดใน HTML ต้องทำด้วย JavaScript:
ตัวอย่าง
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
ขั้นที่ 1: หาองค์ประกอบ Canvas
ในตอนแรก คุณจะต้องหาองค์ประกอบ <canvas>:
นี่ทำได้โดยใช้วิธี HTML DOM คือ getElementById():
const canvas = document.getElementById("myCanvas");
ขั้นที่ 2: สร้างวัตถุวาด
นอกจากนี้ คุณต้องการวัตถุวาดกระดานวาด。
getContext() เป็นวัตถุ HTML ภายในต้นฉบับ ที่มีคุณสมบัติและวิธีสำหรับวาด:
const ctx = canvas.getContext("2d");
ขั้นที่ 3: วาดบนกระดานวาด
ในที่สุด คุณสามารถวาดบนกระดานวาดได้แล้ว。
ตั้งค่าสีที่ทำตารางของวัตถุวาดเป็นสีแดง:
ctx.fillStyle = "#FF0000";
fillStyle ค่าที่เริ่มต้นคือสีดำ。
fillRect(x,y,width,height) วิธีในการวาดสี่เหลี่ยมจัตุรัสบนกระดานวาด โดยใช้สีที่ทำตารางเพื่อทำตาราง:
ctx.fillRect(0, 0, 150, 75);
ดูเพิ่มเติม:
- หน้าก่อน คำอธิบาย Canvas
- หน้าต่อไป ตำแหน่ง Canvas
