บทความนี้ส่วนใหญ่แนะนำคำแนะนำเกี่ยวกับการใช้วิธี Canvas ของ HTML5 มันง่ายและชัดเจนมาก เป็นบทความที่ดีมาก ฉันแนะนำให้คุณที่นี่
วิธีการผ้าใบ
บันทึก () บันทึกสถานะของสภาพแวดล้อมปัจจุบัน
คืนค่า () ส่งคืนสถานะเส้นทางและคุณสมบัติที่ได้รับการบันทึกมาก่อน
createEvent ()
getContext () ส่งคืนวัตถุที่ระบุ API ที่จำเป็นสำหรับการเข้าถึงฟังก์ชั่นการวาดภาพ
todataupl () ส่งคืน URL ของภาพผืนผ้าใบ
คุณสมบัติและวิธีการของรูปแบบบรรทัด
คุณสมบัติ:
ชุด linecap หรือส่งคืนสไตล์ปลายทางสิ้นสุดของบรรทัด
LineJoin ตั้งค่าหรือส่งคืนประเภทมุมที่สร้างขึ้นเมื่อสองบรรทัดตัดกัน
LineWidth ตั้งค่าหรือส่งคืนความกว้างของบรรทัดปัจจุบัน
MITERLIMIT SET หรือส่งคืนความยาวของมเทอร์สูงสุด
คุณสมบัติสีสไตล์และเงาและวิธีการ
คุณสมบัติ
ชุด Fillstyle หรือส่งคืนสีการไล่ระดับสีหรือโหมดที่ใช้เติมภาพวาด
Strokestyle Set หรือส่งคืนสีการไล่ระดับสีหรือโหมดที่ใช้สำหรับจังหวะ
SHOWNCOLOR SET หรือส่งคืนสีที่ใช้สำหรับเงา
ชุด Shadowblur หรือส่งคืนระดับเบลอที่ใช้สำหรับเงา
shadowoffsetx ตั้งค่าหรือส่งกลับระยะทางแนวนอนของเงาไปยังรูปร่าง
shadowoffsety sets หรือส่งคืนระยะทางแนวตั้งของเงาไปสู่รูปร่าง
วิธี
CreateLinearGradient () สร้างการไล่ระดับสีเชิงเส้น (ใช้กับเนื้อหาผ้าใบ)
createPattern () ทำซ้ำองค์ประกอบที่ระบุในทิศทางที่ระบุ
createradialgradient () สร้างเรเดียล/แหวนไล่ระดับสี (ใช้กับเนื้อหาผ้าใบ)
addColorStop () ระบุสีหรือตำแหน่งหยุดในวัตถุไล่ระดับสี
วิธีการเส้นทาง
เติม () เติมภาพวาดปัจจุบัน (เส้นทาง)
Stroke () ดึงเส้นทางที่กำหนดไว้
เริ่มต้น () เริ่มต้นเส้นทางหรือรีเซ็ตเส้นทางปัจจุบัน
Moveto () ย้ายเส้นทางไปยังจุดที่ระบุในผืนผ้าใบโดยไม่ต้องสร้างเส้น
ClosePath () สร้างเส้นทางจากจุดปัจจุบันไปยังจุดเริ่มต้น
Lineto () เพิ่มจุดใหม่เพื่อสร้างบรรทัดจากจุดนั้นไปยังจุดที่ระบุล่าสุด
คลิป () ตัดพื้นที่ที่มีรูปร่างและขนาดใด ๆ จากผืนผ้าใบดั้งเดิม
quadraticcurveto () สร้างเส้นโค้ง Bezier ที่สอง
Beziercureto () สร้างเส้นโค้ง bezier สุดท้าย
ARC () สร้างอาร์ค/เส้นโค้ง (ใช้เพื่อสร้างวงกลมหรือวงกลมบางส่วน)
Arcto () สร้างส่วนโค้ง/เส้นโค้งระหว่างสองแทนเจนต์
isPointInpath () ส่งคืนค่าบูลีนหากจุดที่ระบุอยู่ในเส้นทางปัจจุบัน
สี่เหลี่ยมผืนผ้า
rect () สร้างสี่เหลี่ยมผืนผ้า
Fillrect () ดึงสี่เหลี่ยมผืนผ้าที่เติมเต็ม
Strokerect () ดึงสี่เหลี่ยมผืนผ้า (ไม่มีการเติม)
ClearRect () ล้างพิกเซลที่ระบุภายในสี่เหลี่ยมผืนผ้าที่กำหนด
ตั้งค่าคุณสมบัติและวิธีการข้อความ
คุณสมบัติ:
ตัวอักษรตั้งค่าหรือส่งคืนคุณสมบัติตัวอักษรปัจจุบันของเนื้อหาข้อความ
textalign set หรือส่งคืนการจัดตำแหน่งปัจจุบันของเนื้อหาข้อความ
การตั้งค่า textbaseline ส่งคืนพื้นฐานข้อความปัจจุบันที่ใช้เมื่อวาดข้อความ
วิธี:
Filltext () วาดข้อความที่กรอกบนผืนผ้าใบ
Stroketext () วาดข้อความบนผืนผ้าใบ (ไม่เติม)
MeasureText () ส่งคืนวัตถุที่มีความกว้างข้อความที่ระบุ
วิธีการแปลง
สเกล () ปรับขนาดพล็อตปัจจุบันให้ใหญ่ขึ้นหรือเล็กลง
หมุน () หมุนภาพวาดปัจจุบัน
แปล () แมปตำแหน่ง (0,0) ของเสื้อลายดอกไม้
transform () แทนที่เมทริกซ์การแปลงปัจจุบันของภาพวาด
SetTransform () รีเซ็ตการแปลงปัจจุบันเป็นเมทริกซ์หน่วย จากนั้นเรียกใช้ transform ()