บทความนี้ส่วนใหญ่แนะนำ 24 สรุปความรู้พื้นฐานของผ้าใบซึ่งครอบคลุมและมีรายละเอียดมากและแนะนำให้ทุกคน
ตอนนี้สรุปจุดความรู้ของผ้าใบดังนี้เพื่อให้สามารถอ่านได้ตลอดเวลา
1. เติมเต็ม รูปสี่เหลี่ยมผืนผ้า (x, y, ความกว้าง, ความสูง); 2. วาด strokerect ชายแดนสี่เหลี่ยมผืนผ้า (x, y, ความกว้าง, ความสูง); 3. ลบสี่เหลี่ยมผืนผ้า clearrect (x, y, ความกว้าง, ความสูง); 4. Fillstyle = สีแดง; สไตล์อาจเป็นสีไล่ระดับและภาพ 5. Strokestyle = สีแดง; 6. ความกว้างของเส้นจังหวะ linewidth = 4; 7. รูปร่างของจุดสิ้นสุดของ lineCap = butt; ก้น (เชื่อมต่อ)/กลม (วงกลม)/สี่เหลี่ยมจัตุรัส (สี่เหลี่ยม) โดยค่าเริ่มต้นมันเป็นก้น; 8. Line Intersection Style LineJoin = Miter; MITER (มุมคม)/กลม (มุมโค้งมน)/มุมเอียง (มุมเอียง) มุมคมเริ่มต้น; 9. เริ่มวาดเส้นทาง เริ่มต้น (); 10. จบเส้นทาง ClosePath (); หลังจากสร้างเส้นทางหากคุณต้องการวาดเส้นที่เชื่อมต่อกับจุดเริ่มต้นของเส้นทางคุณสามารถเรียก closepath (); 11. วาดอาร์ คอาร์ค (x, y, รัศมี, สตาร์ทแอก, endangle, true/false); 12. วาดอาร์ค อาร์คโต (x1, y1, x2, y2, รัศมี) เริ่มวาดอาร์คของหนึ่งวันจากจุดก่อนหน้าจนถึง x2, y2 และผ่าน x1, y1 ด้วยรัศมีที่กำหนด; 13. Moveto (x, y); ย้ายเคอร์เซอร์วาดไปที่ (x, y) โดยไม่ต้องวาดเส้น 14. lineto (x, y); วาดเส้นตรงจากจุดก่อนหน้า 15. เส้นโค้ง bezier กำลังสอง: quadraticcurveto (cx, cy, x, y); เริ่มวาดเส้นโค้งกำลังสองจากจุดก่อนหน้าจนกระทั่ง X, Y, CX, CY ทำหน้าที่เป็นจุดควบคุม 16. Cubic Bezier Curve : Beziercurveto (CX1, Cy1, Cx2, Cy2, X, Y); เริ่มวาดเส้นโค้งกำลังสองจากจุดก่อนหน้าจนถึง X, Y, Y, CX1, CY1 และ CX2, CY2 ถูกใช้เป็นจุดควบคุม 17. rect (x, y, ความกว้าง, ความสูง); เริ่มต้นจากจุด x, y และความกว้างและความสูงที่ระบุโดยความกว้างและความสูงตามลำดับ วิธีนี้วาดเส้นทางรูปสี่เหลี่ยมผืนผ้าไม่ใช่รูปร่างแยกต่างหาก 18. วาดข้อความ:(1) เติมข้อความ: Filltext (Hello, X, Y, Width); ความกว้างเป็นความกว้างสูงสุดของพิกเซล หากข้อความมากกว่าความกว้างสูงสุดข้อความจะหดตัวเพื่อรองรับความกว้างสูงสุด
(2) Text Stroke: Stroketext (Hello, X, Y, ความกว้าง); ความกว้างเป็นความกว้างสูงสุดของพิกเซล
(3) รูปแบบข้อความ: ตัวอักษร = ตัวหนา 14px Arial;
(4) การจัดตำแหน่งข้อความแนวนอน: textalign = 'start'; // start, end, ซ้าย, ขวา, ตรงกลาง ค่าเริ่มต้น: เริ่มต้น จัดแนวแกนแนวตั้งกับจุดเริ่มต้น (x, y) ของข้อความเป็นจุดพื้นฐาน
(5) การจัดตำแหน่งข้อความแนวตั้ง: textbaseline = 'ตัวอักษร'; // ด้านบน, แขวน, กลาง, ตัวอักษร, ความคิด, ด้านล่าง ค่าเริ่มต้น: ตัวอักษร จัดแนวแกนแนวนอนกับจุดเริ่มต้น (x, y) ของข้อความเป็นจุดพื้นฐาน
(6) ความกว้างของข้อความ: var text = hello; ความยาว var = context.measureetext (ข้อความ); ข้อความพารามิเตอร์คือข้อความที่ต้องวาด
19. เปลี่ยน
(1) หมุน (มุม): หมุนเรเดียนมุมของภาพรอบ ๆ ต้นกำเนิด
นอกจากนี้คุณยังสามารถใช้ transform (math.cos (angle*math.pi/180), math.sin (angle*math.pi/180),-math.sin (angle*math.pi/180), math.cos (มุม*math.pi/180), 0,0);
(2) มาตราส่วน (x, y): ปรับขนาดภาพ คุณยังสามารถใช้การแปลง (x, 0,0, y, 0,0);
(3) แปล (x, y): ย้ายที่มาพิกัดไปยัง x, y หลังจากทำการเปลี่ยนแปลงนี้พิกัด 0 และ 0 จะกลายเป็นจุดที่แสดงโดย x, y ก่อน นอกจากนี้คุณยังสามารถใช้การแปลง (1,0,0,1, x, y);
(4) แปลง (<gumber>, <gumber>, <gumber>, <gumber>, <gumber>, x, y);
(5) setTransform (<gumber>, <gumber>, <gumber>, <gumber>, x, y); รีเซ็ตเมทริกซ์การแปลงเป็นสถานะเริ่มต้นจากนั้นเรียกเปลี่ยนการแปลง ();
20. การรวมกันของกราฟิก คัดลอกรหัส