ความคิดเห็น: ความกว้างและความสูงเริ่มต้นของผ้าใบคือ 300 และ 150 เพื่อหลีกเลี่ยงข้อยกเว้นควรใช้แอตทริบิวต์การแสดงผลเพื่อเพิ่มพวกเขาแทนที่จะใช้ CSS เพื่อเพิ่มความกว้างและความสูง ด้านล่างเป็นการแนะนำสั้น ๆ เกี่ยวกับข้อควรระวังสำหรับการใช้ผ้าใบ เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ
1. Canvas การสอนภาษาจีน https://developer.mozilla.org/zh-cn/docs/canvas_tutorial2. ความกว้างและความสูงเริ่มต้นของผ้าใบคือ 300 และ 150 เพื่อหลีกเลี่ยงข้อยกเว้นควรใช้แอตทริบิวต์การแสดงผลเพื่อเพิ่มพวกเขาแทนที่จะใช้ CSS เพื่อเพิ่มความกว้างและความสูง
3. คำแนะนำสำหรับการเพิ่มเบราว์เซอร์ที่ไม่รองรับแท็ก Canvas ภายในแท็ก Canvas
4. คุณสามารถพิจารณาได้ว่าเบราว์เซอร์รองรับผืนผ้าใบผ่านรหัส JS ต่อไปนี้หรือไม่
var canvas = document.getElementById ('การสอน');
if (canvas.getContext) {
var ctx = canvas.getContext ('2d');
// รหัสวาดที่นี่
} อื่น {
// Canvas-unsupported code ที่นี่
-
5. ผืนผ้าใบรองรับการวาดรูปทรงพื้นฐานเดียวนั่นคือสี่เหลี่ยม แต่ตัวเลขอื่น ๆ สามารถวาดผ่านเส้นทางผืนผ้าใบ
6. มีสี่ฟังก์ชั่นในการวาดสี่เหลี่ยม: rect, fillrect, strokerect และ clearrect
7. ฟังก์ชั่นของการเริ่มต้นใช้งานจะใช้ในการเริ่มต้นเลเยอร์เส้นทางใหม่ หากไม่ได้เพิ่มมันหมายถึงการวาดบนเลเยอร์เส้นทางดั้งเดิม ผลกระทบของรหัสสองรหัสต่อไปนี้แตกต่างกันอย่างสิ้นเชิง รหัสแรกแสดงสองบรรทัดสีแดงและรหัสที่สองแสดงเส้นสีดำและเส้นสีแดง
var ctx = document.getElementById ('cvs'). getContext ('2d');
ctx.beginpath ();
ctx.moveto (100.5,20.5);
ctx.lineto (200.5, 20.5);
ctx.stroke ();
ctx.moveto (100.5,40.5);
ctx.lineto (200.5, 40.5)
ctx.strokestyle = '#f00';
ctx.stroke ();
var ctx = document.getElementById ('cvs'). getContext ('2d');
ctx.beginpath ();
ctx.moveto (100.5,20.5);
ctx.lineto (200.5, 20.5);
ctx.stroke ();
ctx.beginpath ();
ctx.moveto (100.5,40.5);
ctx.lineto (200.5, 40.5)
ctx.strokestyle = '#f00';
ctx.stroke ();
8. หากไม่จำเป็นต้องปิดเส้นทางให้ใช้ closepath หากใช้การเติมเส้นทางจะถูกปิดโดยอัตโนมัติ ไม่จำเป็นต้องใช้ ClosePath อีกต่อไป
9. ตราบใดที่คุณมีความอดทนเพียงพอคุณสามารถใช้เส้นโค้ง Bezier เพื่อวาดรูปใดก็ได้
10. มีข้อผิดพลาดในเส้นโค้งกำลังสองภายใต้ Firefox ดังนั้นเส้นโค้งลูกบาศก์สามารถใช้แทนเส้นโค้งกำลังสอง
11. รูปภาพ (เช่น PNG, GIF, JPEG ฯลฯ ) สามารถนำมาใช้ในผืนผ้าใบและองค์ประกอบผ้าใบอื่น ๆ สามารถใช้เป็นแหล่งที่มาของภาพได้
12. ด้านล่างเป็นรหัสวาดภาพผืนผ้าใบพื้นฐานที่ภาพเป็นอิมเมจภาพหรือผ้าใบ x และ y เป็นพิกัดเริ่มต้นของพวกเขาในผืนผ้าใบเป้าหมาย
drawimage (ภาพ, x, y)
รหัสต่อไปนี้แสดงถึงภาพความกว้างและความสูงที่ซูม
drawimage (ภาพ, x, y, ความกว้าง, ความสูง)
รหัสต่อไปนี้แสดงถึงภาพตัด พารามิเตอร์แรกนั้นเหมือนกับอื่น ๆ ทั้งสองทั้งคู่อ้างอิงถึงภาพหนึ่งภาพหรือผืนผ้าใบอื่น อีก 8 พารามิเตอร์ตามลำดับแสดงถึงพิกัด X เริ่มต้นของการตัดในภาพพิกัด y เริ่มต้นของการตัดในภาพความกว้างของพื้นที่ตัดความสูงของพื้นที่ตัด, พิกัด x ของตำแหน่งที่ถูกดึงออกไป ขนาดของภาพวาด
DrawImage (Image, SX, SY, Swidth, Sheight, DX, DY, DWIDTH, DHEIGHT)
13. Strokestyle ใช้เพื่อตั้งค่าสีของเค้าร่างกราฟิกในขณะที่ Fillstyle ใช้เพื่อตั้งค่าสีเติม สีอาจเป็นสตริงวัตถุไล่ระดับสีหรือวัตถุรูปแบบที่แสดงถึงค่าสี CSS โดยค่าเริ่มต้นทั้งสีและสีเติมเป็นสีดำ (ค่าสี CSS #000000)
14. ความโปร่งใสของภาพสามารถแสดงได้โดย GlobalAlpha = ค่าความโปร่งใสหรือค่าสี RGBA
15. คุณสมบัติ linewidth ตั้งค่าความหนาของเส้นที่วาดปัจจุบัน เพื่อแก้ปัญหาข้อบกพร่องความกว้าง 1px บรรทัด +0.5 ใช้เพื่อแก้ปัญหา
16. บรรทัดบนบรรทัดซ้ายสุดของแอตทริบิวต์ LinEcap ใช้ก้นเริ่มต้น มันสามารถสังเกตได้ว่ามันล้างด้วยเส้นเสริม ตรงกลางเป็นเอฟเฟกต์ของรอบและครึ่งวงกลมที่มีรัศมีครึ่งความกว้างของเส้นจะถูกเพิ่มที่จุดสิ้นสุด ด้านขวาคือเอฟเฟกต์ของสี่เหลี่ยมโดยมีสี่เหลี่ยมจัตุรัสที่มีความกว้างเท่ากันและความสูงครึ่งความกว้างของเส้นเพิ่มที่จุดสิ้นสุด
17. ที่นี่ฉันยังใช้โพลีไลน์สามตัวเป็นตัวอย่างในการตั้งค่า linejoin ที่แตกต่างกัน ด้านบนคือเอฟเฟกต์ของกลมขอบและมุมโค้งมนและรัศมีของวงกลมเท่ากับความกว้างของเส้น ตรงกลางและด้านล่างเป็นผลกระทบของมุมเอียงและมเทอร์ตามลำดับ เมื่อค่าเป็นเครื่องยัดส่วนของเส้นจะขยายออกไปนอกการเชื่อมต่อจนกว่าจะตัดกันที่จุดหนึ่ง เอฟเฟกต์ส่วนขยายถูก จำกัด โดยแอตทริบิวต์ MiterLimit ที่จะแนะนำด้านล่าง
18. วิธีการบันทึกและการกู้คืนใช้เพื่อบันทึกและกู้คืนสถานะผ้าใบและไม่มีพารามิเตอร์ State of Canvas เป็นภาพรวมของสไตล์และการเสียรูปทั้งหมดที่ใช้กับหน้าจอปัจจุบัน สถานะผ้าใบถูกบันทึกไว้ในรูปแบบของกอง (สแต็ค) ทุกครั้งที่มีการเรียกวิธีการบันทึกสถานะปัจจุบันจะถูกผลักเข้าไปในกองและบันทึก ทุกครั้งที่มีการเรียกใช้วิธีการคืนค่าสถานะที่บันทึกไว้ก่อนหน้านี้จะปรากฏขึ้นจากกองและการตั้งค่าทั้งหมดจะถูกกู้คืน
19. แปลง (1, 0, 0, 1, 0, 0) พารามิเตอร์แสดงถึงการปรับขนาดแนวนอนการหมุนแนวนอน (ตามเข็มนาฬิกา) การหมุนแนวตั้ง (ทวนเข็มนาฬิกา) การปรับขนาดแนวตั้งชดเชยแนวนอนออฟเซ็ตแนวตั้ง
SetTransform (1, 0, 0, 1, 0, 0) หมายถึงการรีเซ็ตเมทริกซ์การแปลงก่อนหน้านี้จากนั้นสร้างเมทริกซ์ใหม่ พารามิเตอร์เหมือนกับข้างต้น
หมุน (มุม), (หนึ่งรัศมีเท่ากับ 1 เรเดียน, 2πr/r = เรเดียนนั่นคือ 360 = 2πนั่นคือ 1 = π/180)
20. แอนิเมชั่นเป็นจริงการล้าง artboard (clearrect ()) อย่างต่อเนื่องจากนั้นทาสีใหม่