สวัสดีเพื่อน ๆ ที่รักของฉันฉันดูถูกส่วนหน้าของตัวเองเขียนบล็อกเป็นครั้งแรกและไม่เขียนดีโปรดยกโทษให้ฉันเข้าใจ
ก่อนการสอนฉันคิดว่าคุณฉลาด กับที่นี่;
โอเค! ภาพด้านล่างเป็นเอฟเฟกต์ง่ายๆหลังจากที่เราเสร็จสิ้น
1. กำหนดผ้าใบก่อนอื่นตอนนี้เราแทรกแท็ก <sanvas> ในไฟล์ HTML เพื่อกำหนดขนาดของผืนผ้าใบ ในเวลาเดียวกันสีพื้นหลังของผ้าใบตั้งอยู่ในตารางสไตล์ภายใน (เพื่อดูเมื่อสะดวกสำหรับการวาด);
<! Canvas {background:#5151a2;} </style> </head> <body> <canvas id = canvas width = 800 ความสูง = 600> </body> </html>แกนต่อไปคือการวาดกังหันลมในสภาพแวดล้อม JS ดั้งเดิม กราฟิก 2D บนผืนผ้าใบ
<script type = text/javascript> // รับบริบท 2D ของการรับผ้าใบ2. วาดฐานกังหันลม
รูปทรงเรขาคณิตของฐานกังหันลมดูเหมือนรูปสี่เหลี่ยมขนมเปียกปูนเรียวและเรียว ดูรหัสโดยตรง ~~!
// กำหนดฟังก์ชั่น, ฐานล่างของฟังก์ชั่นกังหันลมบรรจุภัณฑ์ buttom () {ctx.beginpath (); (0,#CCC); = liner; จุดเริ่มต้น CTX.lineto (410,600);มาดูเอฟเฟกต์ในหน้ากันมันง่ายไหม?
(ฉันรู้สึกว่าฉันค่อนข้างมากเกินไป ~! ~!)
3. วาดใบส่วนต่อไปจะเป็นสถานที่ที่สำคัญที่สุดในแอนิเมชั่นนี้ อาจมีในใจของคุณ รูปร่างของใบไม้ควรจะวาดได้อย่างไร? ใบสามารถคัดลอกและวางได้หรือไม่? คำตอบก็โอเคมาทำกันเถอะ!
การวิเคราะห์การคิด:
1) เนื่องจากรูปร่างของทั้งสามใบนั้นเหมือนกันเราจำเป็นต้องวาดใบเท่านั้น เพียงแค่เรียกมันว่าฟังก์ชัน bind ()! จุดตัด แค่เรียกมันว่า! ทำไม! TM ของคุณฉลาดเกินไป
2) สามใบมีหัวใจกลม ใช้วิธีการแปล () ที่นี่ระบบพิกัดมือถือ!
3) จุดที่ยากที่สุดคือการเข้าใจว่าภาพเคลื่อนไหวเป็นอย่างไรที่นี่เพราะหลักการแอนิเมชันจะส่งผลกระทบต่อโครงสร้างเอกสารของภาพวาดของเรา: โครงสร้างของใบไม้:
ก่อนอื่นเราสร้างสภาพแวดล้อมการวาดใหม่เราเรียกมันว่าสภาพแวดล้อม 1 เราวาดใบแรกในสภาพแวดล้อม 1; การเรียกใบไม้บน upside () วาดทั้งสองใบ; ;
หากเราต้องการบรรลุแอนิเมชั่นเราจะต้องหมุนสภาพแวดล้อมการวาดภาพ 1 ของใบแรก จุดตัด Barrage: 6666666
4) ในที่สุดรูปแบบลักษณะพื้นฐานบางอย่างจะดีบั๊ก! เช่นการไล่ระดับสีความโปร่งใส ฯลฯ !
วาดใบไม้เมื่อฉันวาดรูปใบนี้ฉันก็ทำการดีบักอย่างช้าๆ
ที่นี่ฉันประกาศตัวแปร var num = 0;, เป็นพารามิเตอร์ของการเปลี่ยนแปลงจำนวนการหมุนของสภาพแวดล้อม: จากนั้นลองดูที่รหัสโดยตรง! จุดตัด จุดตัด
var = 0; การหมุนของระบบพิกัด ctx.rotate ((math.pi/180)*num); liner1.addcolorsstop (0,#ccc); ครั้งแรกที่ ctx.beginpath (); หมุน 120 ° CTX.save (); 120); // ตอบก่อนสถานะที่สอง (ระบบพิกัดหมุน) // วาด ctx.beginpath (); CCC); ระบบพิกัดการแปล) num+= 5;停的变化， ****** ************************************** ******************************************************** ******************************************************** ******************************************************** *************** แต่ละใบเป็นรหัสซ้ำนี่คือฟังก์ชั่นฟังก์ชันบรรจุภัณฑ์ bind () {ctx.moveto (0,0); 30, -12); 12,30,12); 4. ตั้งค่าแอนิเมชั่นส่วนหนึ่งของแอนิเมชั่นนี้ค่อนข้างง่าย จุดตัด จุดตัด
setInterval (function () {ctx.clearRect);}, 50);ซอร์สโค้ด: https://github.com/224137748/canvas/blob/master/windmill.html
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้