วัตถุผ้าใบ
วัตถุผ้าใบใหม่ใน HTML5
HTML5 <canvas> แท็กที่ใช้ในการวาดภาพกราฟิกในการบินด้วย JavaScript
เข้าวัตถุผ้าใบ
คุณสามารถเข้าถึง <canvas> องค์ประกอบโดยใช้ getElementById() :
ตัวอย่าง
var x = document.getElementById("myCanvas");
ลองตัวเอง» สร้างวัตถุผ้าใบ
คุณสามารถสร้าง <canvas> องค์ประกอบโดยใช้ document. createElement() document. createElement() วิธีการ:
ตัวอย่าง
var x = document.createElement("CANVAS");
ลองตัวเอง» หมายเหตุ: <canvas> องค์ประกอบที่ไม่มีความสามารถในการวาดภาพของตัวเอง (มันเป็นเพียงภาชนะสำหรับกราฟิก) - คุณต้องใช้สคริปต์เพื่อจริงวาดกราฟิก
getContext() วิธีการส่งกลับวัตถุที่ให้วิธีการและคุณสมบัติสำหรับการวาดภาพบนผืนผ้าใบที่
อ้างอิงนี้จะครอบคลุมคุณสมบัติและวิธีการของ getContext("2d") วัตถุที่สามารถนำมาใช้ในการวาดข้อความเส้นกล่อง, วงกลม, และอื่น ๆ - บนผืนผ้าใบ
สีรูปแบบและเงา
| คุณสมบัติ | ลักษณะ |
|---|
| fillStyle | ชุดหรือส่งกลับสีไล่ระดับสีหรือรูปแบบที่ใช้ในการกรอกการวาดภาพ |
| strokeStyle | ชุดหรือส่งกลับสีไล่ระดับสีหรือรูปแบบที่ใช้สำหรับจังหวะ |
| shadowColor | ตั้งค่าหรือผลตอบแทนที่ได้สีที่จะใช้สำหรับเงา |
| shadowBlur | ตั้งค่าหรือผลตอบแทนที่ระดับเบลอสำหรับเงา |
| shadowOffsetX | ตั้งหรือส่งกลับระยะทางแนวนอนของเงาจากรูปร่าง |
| shadowOffsetY | ตั้งค่าหรือผลตอบแทนระยะทางแนวตั้งของเงาจากรูปร่าง |
ลักษณะของเส้น
| คุณสมบัติ | ลักษณะ |
|---|
| lineCap | ตั้งค่าหรือผลตอบแทนรูปแบบของฝาท้ายสำหรับบรรทัด |
| lineJoin | ชุดหรือผลตอบแทนประเภทของมุมที่สร้างขึ้นเมื่อทั้งสองสายการตอบสนอง |
| lineWidth | ตั้งหรือส่งกลับความกว้างของเส้นปัจจุบัน |
| miterLimit | ตั้งค่าหรือผลตอบแทนที่ได้ความยาวสูงสุดตุ้มปี่ |
รูปสี่เหลี่ยม
เส้นทาง
| วิธี | ลักษณะ |
|---|
| fill() | เติมภาพวาดปัจจุบัน (path) |
| stroke() | ที่จริงดึงเส้นทางที่คุณได้กำหนดไว้ |
| beginPath() | เริ่มต้นเส้นทางหรือรีเซ็ตเส้นทางปัจจุบัน |
| moveTo() | ย้ายเส้นทางไปยังจุดที่กำหนดในผืนผ้าใบโดยไม่ต้องสร้างบรรทัด |
| closePath() | สร้างเส้นทางจากจุดปัจจุบันกลับไปยังจุดเริ่มต้น |
| lineTo() | เพิ่มจุดใหม่และสร้างเส้นจากจุดนั้นไปยังจุดที่กำหนดสุดท้ายในผืนผ้าใบ |
| clip() | คลิปภูมิภาคของรูปร่างและขนาดใด ๆ จากผ้าใบเดิม |
| quadraticCurveTo() | สร้างเส้นโค้ง Bezier กำลังสอง |
| bezierCurveTo() | สร้างเส้นโค้ง Bezier ลูกบาศก์ |
| arc() | สร้างโค้ง / เส้นโค้ง (used to create circles, or parts of circles) |
| arcTo() | สร้างโค้ง / เส้นโค้งระหว่างสองเสียบ้าง |
| isPointInPath() | ผลตอบแทนจริงถ้าจุดที่กำหนดอยู่ในเส้นทางปัจจุบันเท็จอย่างอื่น |
แปลง
ข้อความ
| คุณสมบัติ | ลักษณะ |
|---|
| font | ตั้งหรือส่งกลับคุณสมบัติแบบอักษรปัจจุบันสำหรับเนื้อหาข้อความ |
| textAlign | ตั้งค่าหรือผลตอบแทนการจัดตำแหน่งปัจจุบันสำหรับเนื้อหาข้อความ |
| textBaseline | ชุดหรือผลตอบแทนพื้นฐานข้อความที่ใช้ในปัจจุบันเมื่อวาดข้อความ |
การวาดภาพ
| วิธี | ลักษณะ |
|---|
| drawImage() | วาดภาพผ้าใบหรือวิดีโอลงบนผืนผ้าใบ |
การจัดการพิกเซล
| คุณสมบัติ | ลักษณะ |
|---|
| width | ส่งกลับความกว้างของวัตถุ ImageData |
| height | ผลตอบแทนที่สูงของวัตถุ ImageData |
| data | ส่งคืนวัตถุที่มีข้อมูลภาพของวัตถุ ImageData ระบุ |
| วิธี | ลักษณะ |
|---|
| createImageData() | สร้างใหม่วัตถุ ImageData ว่างเปล่า |
| getImageData() | ส่งคืนวัตถุ ImageData ที่คัดลอกข้อมูลพิกเซลสำหรับสี่เหลี่ยมที่ระบุบนผืนผ้าใบ |
| putImageData() | ทำให้ข้อมูลภาพ (from a specified ImageData object) กลับขึ้นไปบนผืนผ้าใบ |
คอมโพสิต
อื่น ๆ
| วิธี | ลักษณะ |
|---|
| save() | บันทึกสถานะของบริบทปัจจุบัน |
| restore() | ผลตอบแทนที่รัฐเส้นทางบันทึกไว้ก่อนหน้าและคุณลักษณะ |
| createEvent() | |
| getContext() | |
| toDataURL() | |
คุณสมบัติมาตรฐานและเหตุการณ์
วัตถุผ้าใบนอกจากนี้ยังสนับสนุนมาตรฐาน คุณสมบัติ และ เหตุการณ์ที่เกิดขึ้น
หน้าเว็บที่เกี่ยวข้อง
กวดวิชา HTML: ผ้าใบ HTML5
อ้างอิง HTML: HTML <canvas> แท็ก