ลักษณะ
HTML5 <canvas> แท็กที่ใช้ในการวาดภาพกราฟิกในการบินผ่านสคริปต์ (มักจาวาสคริปต์)
อย่างไรก็ตาม <canvas> องค์ประกอบที่ไม่มีความสามารถในการวาดภาพของตัวเอง (มันเป็นเพียงภาชนะสำหรับกราฟิก) - คุณต้องใช้สคริปต์เพื่อจริงวาดกราฟิก
getContext() วิธีการส่งกลับวัตถุที่ให้วิธีการและคุณสมบัติสำหรับการวาดภาพบนผืนผ้าใบที่
การอ้างอิงนี้จะครอบคลุมคุณสมบัติและวิธีการของ getContext("2d") วัตถุที่สามารถนำมาใช้ในการวาดข้อความเส้นกล่อง, วงกลม, และอื่น ๆ - บนผืนผ้าใบ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่องค์ประกอบ
| ธาตุ | | | | | |
|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Internet Explorer 9, Firefox, Opera, Chrome, Safari และการสนับสนุน <canvas> และคุณสมบัติและวิธีการของ
หมายเหตุ: Internet Explorer 8 และรุ่นก่อนหน้านี้ไม่สนับสนุน <canvas> องค์ประกอบ
สีรูปแบบและเงา
| คุณสมบัติ | ลักษณะ |
|---|
| fillStyle | ชุดหรือส่งกลับสีไล่ระดับสีหรือรูปแบบที่ใช้ในการกรอกการวาดภาพ |
| strokeStyle | ชุดหรือส่งกลับสีไล่ระดับสีหรือรูปแบบที่ใช้สำหรับจังหวะ |
| shadowColor | ชุดหรือผลตอบแทนที่ได้สีที่จะใช้สำหรับเงา |
| shadowBlur | ชุดหรือผลตอบแทนที่ระดับเบลอสำหรับเงา |
| shadowOffsetX | ชุดหรือส่งกลับระยะทางแนวนอนของเงาจากรูปร่าง |
| shadowOffsetY | ชุดหรือผลตอบแทนระยะทางแนวตั้งของเงาจากรูปร่าง |
ลักษณะของเส้น
| คุณสมบัติ | ลักษณะ |
|---|
| lineCap | ชุดหรือผลตอบแทนรูปแบบของฝาท้ายสำหรับบรรทัด |
| lineJoin | ชุดหรือผลตอบแทนประเภทของมุมที่สร้างขึ้นเมื่อเส้นตรงสองเส้น |
| lineWidth | ชุดหรือส่งกลับความกว้างของเส้นปัจจุบัน |
| miterLimit | ชุดหรือผลตอบแทนที่ได้ความยาวสูงสุดตุ้มปี่ |
รูปสี่เหลี่ยม
เส้นทาง
| วิธี | ลักษณะ |
|---|
| fill() | เติมภาพวาดปัจจุบัน (เส้นทาง) |
| stroke() | ที่จริงดึงเส้นทางที่คุณได้กำหนดไว้ |
| beginPath() | เริ่มต้นเส้นทางหรือรีเซ็ตเส้นทางปัจจุบัน |
| moveTo() | ย้ายเส้นทางไปยังจุดที่กำหนดในผืนผ้าใบโดยไม่ต้องสร้างบรรทัด |
| closePath() | สร้างเส้นทางจากจุดปัจจุบันกลับไปยังจุดเริ่มต้น |
| lineTo() | เพิ่มจุดใหม่และสร้างสายไปยังจุดที่ห่างจากจุดที่กำหนดสุดท้ายในผืนผ้าใบ |
| clip() | คลิปภูมิภาคของรูปร่างและขนาดใด ๆ จากผ้าใบเดิม |
| quadraticCurveTo() | สร้างเส้นโค้ง Bezier กำลังสอง |
| bezierCurveTo() | สร้างเส้นโค้ง Bezier ลูกบาศก์ |
| arc() | สร้างโค้ง / Curve (ใช้ในการสร้างวงกลมหรือบางส่วนของวงกลม) |
| arcTo() | สร้างโค้ง / เส้นโค้งระหว่างสองเสียบ้าง |
| isPointInPath() | ผลตอบแทนจริงถ้าจุดที่กำหนดอยู่ในเส้นทางปัจจุบันเท็จอย่างอื่น |
แปลง
ข้อความ
| คุณสมบัติ | ลักษณะ |
|---|
| font | ชุดหรือส่งกลับคุณสมบัติแบบอักษรปัจจุบันสำหรับเนื้อหาข้อความ |
| textAlign | ชุดหรือผลตอบแทนการจัดตำแหน่งปัจจุบันสำหรับเนื้อหาข้อความ |
| textBaseline | ชุดหรือผลตอบแทนพื้นฐานข้อความที่ใช้ในปัจจุบันเมื่อวาดข้อความ |
การวาดภาพ
| วิธี | ลักษณะ |
|---|
| drawImage() | วาดภาพผ้าใบหรือวิดีโอลงบนผืนผ้าใบ |
การจัดการพิกเซล
| คุณสมบัติ | ลักษณะ |
|---|
| width | ส่งกลับความกว้างของวัตถุ ImageData |
| height | ผลตอบแทนที่สูงของวัตถุ ImageData |
| data | ส่งคืนวัตถุที่มีข้อมูลภาพของวัตถุ ImageData ระบุ |
| วิธี | ลักษณะ |
|---|
| createImageData() | สร้างใหม่วัตถุ ImageData ว่างเปล่า |
| getImageData() | ส่งคืนวัตถุ ImageData ที่คัดลอกข้อมูลพิกเซลสำหรับสี่เหลี่ยมที่ระบุบนผืนผ้าใบ |
| putImageData() | ทำให้ข้อมูลภาพ (จากวัตถุ ImageData ระบุ) กลับขึ้นไปบนผืนผ้าใบ |
คอมโพสิต
อื่น ๆ
| วิธี | ลักษณะ |
|---|
| save() | บันทึกสถานะของบริบทปัจจุบัน |
| restore() | ผลตอบแทนที่รัฐเส้นทางบันทึกไว้ก่อนหน้าและคุณลักษณะ |
| createEvent() | |
| getContext() | |
| toDataURL() | |