ออบเจ็กต์ HTML DOM Canvas เชื่อมโยงกับองค์ประกอบ
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของ Canvas Object -
| ทรัพย์สิน | คำอธิบาย |
|---|---|
| fillStyle | การตั้งค่าหรือคืนค่าสี การไล่ระดับสี หรือรูปแบบที่ใช้เติมภาพวาด |
| จังหวะสไตล์ | การตั้งค่าหรือคืนค่าสี การไล่ระดับสี หรือรูปแบบที่ใช้สำหรับลายเส้น |
| shadowColor | การตั้งค่าหรือคืนค่าสีที่จะใช้สำหรับเงา |
| shadowBlur | การตั้งค่าหรือคืนระดับความเบลอของเงา |
| shadowOffsetX | การตั้งค่าหรือคืนระยะห่างแนวนอนของเงาจากรูปร่าง |
| shadowOffsetY | การตั้งค่าหรือคืนระยะแนวตั้งของเงาจากรูปร่าง |
วิธีการ
ต่อไปนี้เป็นวิธีการของวัตถุ Canvas -
| วิธีการ | คำอธิบาย |
|---|---|
| createLinearGradient() | เพื่อสร้างการไล่ระดับสีเชิงเส้น |
| createPattern() | เพื่อสร้างรูปแบบโดยทำซ้ำองค์ประกอบที่ระบุในทิศทาง |
| shadowColor | การตั้งค่าหรือคืนสีที่จะใช้สำหรับเงา |
| createRadialGradient() | เพื่อสร้างการไล่ระดับสีแบบวงกลม |
| addColorStop() | เพื่อกำหนดหรือคืนระยะห่างแนวนอนของเงาจากรูปร่าง |
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การสร้างวัตถุผ้าใบ -
var x=document.createElement("CANVAS"); ตัวอย่าง
ให้เราดูตัวอย่างของวัตถุผ้าใบ HTML DOM -
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px double blue;
margin:1em;
}
</style>
</head>
<body>
<h1>CANVAS</h1>
<button onclick="createCanvas()">CREATE</button>
<p>Click the above button to create a CANVAS element with a green circle in it</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 ซึ่งเมื่อคลิกแล้วจะเรียกใช้เมธอด createCanvas()
<button onclick="createCanvas()">CREATE</button>
createCanvas() วิธีการสร้าง
หลังจากนั้น ใช้เมธอด arc() เพื่อกำหนดพิกัดของวงกลมและเติมวงกลมนั้นด้วยสีสไตล์การเติม สุดท้ายเราใช้เมธอด stroke() เพื่อวาดบนแคนวาสจริง ๆ และผนวกแคนวาสเป็นลูกขององค์ประกอบร่างกายโดยใช้เมธอด 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);
} 