จัดระเบียบคุณสมบัติใหม่ของ HTML5 และคุณสมบัติทั่วไปของผ้าใบ

บทความนี้ส่วนใหญ่แนะนำคุณสมบัติใหม่ของ HTML5 และการเรียงลำดับคุณสมบัติทั่วไปของผ้าใบ Canvas API เป็นเนื้อหาสำคัญที่ใช้ใน HTML5 เพื่อวาดกราฟิก เพื่อนที่ต้องการมันสามารถอ้างถึง 1. ประเภทเนื้อหา HTML5 ต่อไปนี้

คำใบ้

ตัวเลือก API ไม่เพียง แต่สะดวก เมื่อพูดถึงการสำรวจ DOM API ตัวเลือกมักจะเร็วกว่า API การค้นหาโหนดลูกก่อนหน้า เพื่อใช้งานสไตล์ชีทที่รวดเร็วเบราว์เซอร์จะเพิ่มประสิทธิภาพการจับคู่ตัวเลือกให้เหมาะสม

ผืนผ้าใบเป็นผืนผ้าใบบิตแมปซึ่งกราฟิกที่วาดบนมันไม่สามารถปรับขนาดได้และไม่สามารถขยายและลดลงได้เช่นภาพ SVG นอกจากนี้วัตถุที่วาดด้วยผ้าใบไม่ได้อยู่ในโครงสร้างหน้า DOM หรือเนมสเปซใด ๆ

การเขียนโปรแกรมด้วยผ้าใบคุณต้องได้รับบริบทก่อน จากนั้นดำเนินการในบริบทและใช้การกระทำเหล่านี้กับบริบท

พิกัดในผืนผ้าใบเริ่มต้นจากมุมซ้ายบนแกน x ขยายไปทางขวาในทิศทางแนวนอน (โดยพิกเซล) และแกน y ขยายลงไปในทิศทางแนวตั้ง จุดที่มีพิกัดของมุมซ้ายบน x = 0 และ y-0 เรียกว่าต้นกำเนิด

เช่นเดียวกับองค์ประกอบ HTML ส่วนใหญ่องค์ประกอบ Canvas ยังสามารถเพิ่มเส้นขอบโดยการใช้ CSS, กำหนดระยะขอบด้านใน, ระยะขอบด้านนอก ฯลฯ และแอตทริบิวต์ CSS บางอย่างสามารถสืบทอดได้โดยองค์ประกอบในผืนผ้าใบ

การแก้ไข - ในระบบการวาดคำสั่งคือการแปลง - สามารถนำไปใช้ตามลำดับรวมหรือแก้ไขที่จะใช้เมื่อนำไปใช้ ผลลัพธ์ของการดำเนินการวาดแต่ละครั้งจะต้องได้รับการแก้ไขผ่านเลเยอร์การแก้ไขก่อนที่จะแสดงบนผืนผ้าใบ แม้ว่าสิ่งนี้จะเพิ่มความซับซ้อนเพิ่มเติม แต่ก็เพิ่มคุณสมบัติที่มีประสิทธิภาพมากขึ้นให้กับระบบการวาดซึ่งอาจรองรับการประมวลผลภาพแบบเรียลไทม์เช่นเครื่องมือแก้ไขภาพกระแสหลักในปัจจุบันดังนั้นความซับซ้อนของส่วนนี้ของเนื้อหาใน API จึงเป็นสิ่งจำเป็น

มีข้อเสนอแนะที่สำคัญเกี่ยวกับรหัสที่นำกลับมาใช้ใหม่ได้: โดยทั่วไปการวาดควรเริ่มต้นจากต้นกำเนิด (0,0 คะแนนในระบบพิกัด) ใช้การแปลง (การปรับขนาดการแปลการหมุน ฯลฯ ) จากนั้นปรับเปลี่ยนรหัสอย่างต่อเนื่องจนกว่าจะได้ผลที่ต้องการ

ฟังก์ชันเส้นทางบริบท

(1) Moveto (x, y): ไม่วาดเพียงแค่ย้ายตำแหน่งปัจจุบันไปยังพิกัดปลายทางใหม่ (x, y);

(2) lineto (x, y): ไม่เพียง แต่ย้ายตำแหน่งปัจจุบันไปยังพิกัดเป้าหมายใหม่ (x, y) แต่ยังวาดเส้นตรงระหว่างพิกัดทั้งสอง

(3) ClosePath (): พฤติกรรมของฟังก์ชั่นนี้คล้ายกับ lineto มาก ความแตกต่างเพียงอย่างเดียวคือ ClosePAHT จะใช้พิกัดเริ่มต้นของเส้นทางโดยอัตโนมัติเป็นพิกัดเป้าหมาย ClosePath ยังแจ้งให้ทราบว่ารูปที่วาดในปัจจุบันถูกปิดหรือได้ก่อตัวเป็นพื้นที่ปิดสนิทซึ่งมีประโยชน์มากสำหรับการเติมและจังหวะในอนาคต

(4) Strokerect (): วาดโครงร่างของสี่เหลี่ยมผืนผ้าตามตำแหน่งและพิกัดที่กำหนด

(5) ClearRect (): ล้างเนื้อหาทั้งหมดในพื้นที่สี่เหลี่ยมผืนผ้าและคืนค่าให้เป็นสถานะเริ่มต้นนั่นคือสีโปร่งใส

(6) QuadraticCurveto (): จุดเริ่มต้นของฟังก์ชั่นการวาดเส้นโค้งคือพิกัดปัจจุบันโดยมีขอบ (x, y) สองชุด กลุ่มที่สองหมายถึงจุดสิ้นสุดของเส้นโค้ง กลุ่มแรกแสดงถึงจุดควบคุม จุดควบคุมที่เรียกว่าอยู่ถัดจากเส้นโค้ง (ไม่สูงกว่าเส้นโค้ง) และผลกระทบของมันเทียบเท่ากับการสร้างแรงดึงบนเส้นโค้ง โดยการปรับตำแหน่งของจุดควบคุมความโค้งของเส้นโค้งสามารถเปลี่ยนแปลงได้

รูปภาพเพิ่มความซับซ้อนของการทำงานของผืนผ้าใบ: คุณต้องรอจนกว่าภาพจะถูกโหลดอย่างเต็มที่ก่อนที่จะสามารถใช้งานได้ เบราว์เซอร์มักจะโหลดรูปภาพแบบอะซิงโครนัสในขณะที่สคริปต์หน้าถูกดำเนินการ หากมุมมองแสดงภาพลงบนผืนผ้าใบก่อนที่จะโหลดเต็มรูปแบบผ้าใบจะไม่แสดงรูปภาพใด ๆ

การไล่ระดับสีหมายถึงการใช้อัลกอริทึมการสุ่มตัวอย่างแบบขั้นตอนในชุดสีและใช้ผลลัพธ์กับสไตล์จังหวะและสไตล์การเติม

การใช้การไล่ระดับสีต้องใช้สามขั้นตอน:

(1) สร้างวัตถุไล่ระดับสี

(2) ตั้งค่าสีสำหรับวัตถุไล่ระดับสีและระบุวิธีการเปลี่ยนแปลง

(3) ตั้งค่าการไล่ระดับสีสำหรับสไตล์การเติมหรือสไตล์จังหวะในบริบท

หากต้องการตั้งค่าสีที่จะแสดงให้ใช้ฟังก์ชัน addColorStop บนวัตถุไล่ระดับสี ฟังก์ชั่นนี้อนุญาตให้ระบุพารามิเตอร์สองตัว: สีและชดเชย พารามิเตอร์สีคือสีที่นักพัฒนาต้องการใช้เมื่อถูกลูบหรือเต็มไปด้วยตำแหน่งออฟเซ็ต ออฟเซ็ตเป็นค่าระหว่าง 0.0 ถึง 1.0 ซึ่งแสดงถึงระยะทางที่จะเปลี่ยนไปตามเส้นไล่ระดับสี

นอกเหนือจากการไล่ระดับสีเชิงเส้นแล้ว HTML5 Canvas API ยังรองรับการไล่ระดับสีกัมมันตภาพรังสี การไล่ระดับสีกัมมันตภาพรังสีที่เรียกว่าสีนั้นเปลี่ยนไปอย่างราบรื่นในพื้นที่กรวยระหว่างวงกลมที่ระบุสองวง จุดสิ้นสุดสีที่ใช้สำหรับการไล่ระดับสีกัมมันตรังสีและการไล่ระดับสีเชิงเส้นเหมือนกัน