API Canvas

องค์ประกอบ <canvas> กำหนดพื้นที่บิตแมพ์ในหน้าเว็บ HTML

API Canvas อนุญาตให้ JavaScript วาดกราฟิกบนแผ่นภาพ

API Canvas สามารถวาดรูปทรงกลม、เส้น、เส้นโค้ง、กล่อง、ข้อความและรูปภาพ รวมถึงสี、การหมุน、ความโปร่งและการปฏิบัติต่อพิกเซลต่างๆ

เพิ่ม Canvas ใน HTML

คุณสามารถใช้ตามแบบ <canvas> มาเพิ่มองค์ประกอบ canvas ในตำแหน่งที่ต้องการบนหน้าเว็บ HTML ได้:

ตัวอย่าง

<canvas id="myCanvas" width="300" height="150"></canvas>

ทดลองด้วยตัวเอง

วิธีการเข้าถึงองค์ประกอบ Canvas

คุณสามารถใช้วิธี HTML DOM หรือ getElementById() มาเข้าถึงองค์ประกอบ <canvas> ได้:

const myCanvas = document.getElementById("myCanvas");

ถ้าคุณต้องการวาดบนกราฟิต คุณจำเป็นต้องสร้าง 2D context object

const ctx = myCanvas.getContext("2d");

บันทึก

ตัวองค์ประกอบ HTML <canvas> มีฟีเจอร์วาดเส้น

คุณจำเป็นต้องใช้ JavaScript เพื่อวาดกราฟิตใดๆ

วิธี getContext() คืนค่าองค์ประกอบที่มีเครื่องมือวาด (วิธี)

วาดบนกราฟิต

หลังจากที่สร้าง 2D context object คุณจะสามารถวาดบนกราฟิตได้

วิธี fillRect() ด้านล่างวาดสี่เหลี่ยมผากดำ ที่มีจุดมุมบนขวาของมันอยู่ที่ตำแหน่ง 20,20 ขนาดกว้าง 150 พิกเซล สูง 100 พิกเซล

ตัวอย่าง

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

ทดลองด้วยตัวเอง

ใช้สี

fillStyle ค่านี้ตั้งค่าสีที่ใช้สำหรับการทิ้งสีของวัตถุวาด

ตัวอย่าง

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

ทดลองด้วยตัวเอง

คุณยังสามารถใช้วิธี document.createElement() เพื่อสร้างองค์ประกอบใหม่ของ <canvas> และเพิ่มองค์ประกอบนี้เข้าไปในหน้า HTML ที่มีอยู่:

ตัวอย่าง

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

ทดลองด้วยตัวเอง

เส้นทาง

วิธีที่ตั้งตารางในการวาดบนหน้ากราฟิตคือ:

1. เริ่มเส้นทาง - beginPath()
2. ย้ายไปยังจุด - moveTo()
3. วาดในเส้นทาง - lineTo()
4. วาดเส้นทาง - stroke()

ตัวอย่าง

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

ทดลองด้วยตัวเอง