วัตถุ HTML DOM Canvas เกี่ยวข้องกับองค์ประกอบ <canvas> ที่นำเสนอใน HTML5 แท็ก <canvas> ใช้สำหรับวาดกราฟิกด้วยความช่วยเหลือของ JavaScript Canvas ทำหน้าที่เป็นคอนเทนเนอร์สำหรับกราฟิก บน canvas เราสามารถวาดเส้น รูปทรง ฯลฯ ได้
คุณสมบัติ
คุณสมบัติต่อไปนี้สำหรับวัตถุ Canvas -
| คุณสมบัติ | คำอธิบาย |
|---|---|
| fillStyle | เพื่อตั้งหรือคืนค่าสี ไล่สี หรือรูปแบบที่ใช้เติมการวาด |
| strokeStyle | เพื่อตั้งหรือคืนค่าสี ไล่สี หรือรูปแบบที่ใช้สำหรับเส้นขอบ |
| shadowColor | เพื่อตั้งหรือคืนค่าสีที่จะใช้สำหรับเงา |
| shadowBlur | เพื่อตั้งหรือคืนค่าระดับความเบลอของเงา |
| shadowOffsetX | เพื่อตั้งหรือคืนค่าระยะแนวนอนของเงาจากรูปทรง |
| shadowOffsetY | เพื่อตั้งหรือคืนค่าระยะแนวตั้งของเงาจากรูปทรง |
เมธอด
เมธอดต่อไปนี้ของวัตถุ Canvas -
| เมธอด | คำอธิบาย |
|---|---|
| createLinearGradient() | เพื่อสร้างไล่สีเชิงเส้น |
| createPattern() | เพื่อสร้างรูปแบบโดยการทำซ้ำองค์ประกอบที่ระบุในทิศทางหนึ่ง |
| shadowColor | เพื่อตั้งหรือคืนค่าสีที่จะใช้สำหรับเงา |
| createRadialGradient() | เพื่อสร้างไล่สีวงกลม |
| addColorStop() | เพื่อตั้งหรือคืนค่าระยะแนวนอนของเงาจากรูปทรง |
ไวยากรณ์
ไวยากรณ์สำหรับการสร้างวัตถุ canvas ดังนี้ -
var x = document.createElement("CANVAS");
ตัวอย่าง
ลองดูตัวอย่างของวัตถุ HTML DOM canvas -
<!DOCTYPE html> <html> <head> <style> canvas { border: 1px double blue; margin:1em; } </style> </head> <body> <h1>CANVAS</h1> <button onclick="createCanvas()">CREATE</button> <p>คลิกปุ่มด้านบนเพื่อสร้างองค์ประกอบ CANVAS พร้อมวงกลมสีเขียวในนั้น</p> <script> function createCanvas() { var x = document.createElement("CANVAS"); var ctx = x.getContext("2d"); ctx.fillStyle = "#C7EA46"; ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); document.body.appendChild(x); } </script> </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้ -
เมื่อคลิก CREATE -
ในตัวอย่างข้างต้น -
เราสร้างปุ่ม CREATE ซึ่งเมื่อคลิกจะเรียกใช้เมธอด createCanvas()
<button onclick="createCanvas()">CREATE</button>
เมธอด createCanvas() สร้างองค์ประกอบ <canvas> เราจึงดึงบริบทสำหรับ <canvas> ที่สร้างใหม่โดยใช้เมธอด getContext() แต่ละ canvas สามารถมีบริบทได้เพียงหนึ่งเดียว ค่าพารามิเตอร์ "2d" ภายในเมธอด getContext() ระบุว่าจะใช้สำหรับวาดรูปทรง ขนาด คือสิ่ง 2D เท่านั้น เราจึงตั้งค่าสีเติมโดยใช้ fillStyle และใช้เมธอด beginPath() เพื่อเริ่มเส้นทาง
หลังจากนั้น ใช้เมธอด arc() เพื่อกำหนดพิกัดวงกลม และเติมสีวงกลมนั้นด้วยสี fillStyle สุดท้ายเราใช้เมธอด stroke() เพื่อวาดจริงบน canvas และผนวก canvas เป็นลูกขององค์ประกอบ body โดยใช้เมธอด appendChild() ของ document.body -
function createCanvas() { var x = document.createElement("CANVAS"); var ctx = x.getContext("2d"); ctx.fillStyle = "#C7EA46"; ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); document.body.appendChild(x); }
