HTML DOM Canvas ตัวแทน

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

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

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

เพิ่ม Canvas ใน HTML

คุณสามารถใช้ตากาน <canvas> ในตำแหน่งต่างๆ ในหน้าเว็บ HTML ได้:

ตัวอย่าง

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

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

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

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

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

ถ้าคุณต้องการวาดบนกระดาษวาด คุณจำเป็นต้องสร้างวัตถุ 2D ความรับฝึก

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

บันทึก

ตัวองค์ประกอบ HTML <canvas> มีความสามารถวาดรูปภาพ

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

วิธี getContext() คืนค่าวัตถุที่มีเครื่องมือวาด (วิธี)

วาดบนกระดาษวาด

หลังจากที่สร้างวัตถุ 2D ความรับฝึก คุณสามารถวาดบนกระดาษวาดได้

วิธี 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();

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