การสอนอินสแตนซ์ HTML5: แท็ก Canvas ใช้การแปลงเมทริกซ์

บทความบทนำของ wulin.com (www.vevb.com): แอปพลิเคชันของแท็ก Canvas สำหรับ HTML5 Daily Practice - การแปลงเมทริกซ์

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

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

วิธีการแปลง

Context.Transform (A, B, C, D, X, Y);

วิธีนี้มีพารามิเตอร์ 6 ตัวซึ่งพารามิเตอร์ทั้งสี่ A, B, C และ D ส่วนใหญ่จะใช้เพื่อเปลี่ยนรูป X และ Y แสดงถึงจุดพิกัดการเคลื่อนไหว

สามวิธีที่กล่าวถึงในส่วนก่อนหน้าโดยใช้การแปลงพิกัดสำหรับการเปลี่ยนรูปแบบกราฟ:

แปล (x, y);

มาตราส่วน (x, y);

หมุน (มุม);

พวกเขาทั้งหมดสามารถถูกแทนที่ด้วยวิธีการแปลงและพารามิเตอร์ทั้งหกในบริบท transform (a, b, c, d, x, y); มีดังนี้:

แปล (x, y);

มาตราส่วน (a, d);

หมุน (b, c); // วิธีนี้จริง ๆ แล้วมีพารามิเตอร์เดียวเท่านั้น เพื่ออำนวยความสะดวกในการทำความเข้าใจและสอดคล้องกับการแปลงจะใช้พารามิเตอร์ที่เหลืออีก 2 พารามิเตอร์ ฉันวางไว้ที่นี่เพื่อบอกคุณว่าพารามิเตอร์ทั้งสองนี้มีความคล้ายคลึงกันในฟังก์ชั่นและเกี่ยวข้องกับการหมุน

กรณีรหัส