ตัวอย่างภาพวาด Canvas เอฟเฟกต์ลูกบอลลอยน้ำ

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

เอฟเฟกต์ดั้งเดิม

บรรลุผล

ฉันเคยติดต่อกับ svg มาก่อนหลายครั้ง และฉันรู้ว่า Canvas สามารถสร้างเอฟเฟกต์การเรนเดอร์ที่ทรงพลังได้ด้วยเช่นกัน แต่ไม่มีสถานการณ์การใช้งานใดที่ทำให้ฉันมีโอกาสเริ่มต้น ดังนั้นครั้งนี้ฉันวางแผนที่จะลองด้วยตัวเอง .

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

ดู repo GitHub ที่นี่

คำแนะนำในการวาดภาพของ Canvas นั้นคล้ายกับคำแนะนำใน SVG มากซึ่งง่ายมาก

 ctx.beginPath();ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);ctx.fill();

BeginPath เริ่มเส้นทาง ส่วนโค้งจะวาดวงกลม และเติมสี

 ctx.beginPath();ctx.moveTo(from.x, from.y);ctx.lineTo(to.x, to.y);ctx.จังหวะ();

ในทำนองเดียวกัน beginningPath จะเริ่มต้นเส้นทาง moveTo ย้ายแปรงไปยังจุดเริ่มต้น lineTo วาดเส้นไปยังจุดสิ้นสุด และจังหวะลากเส้น

หากต้องการให้ผืนผ้าใบเต็มหน้าจอ เพียงรีเซ็ตความกว้างและความสูงของผืนผ้าใบเมื่อหน้าต่างโหลดหรือปรับขนาด

 var canvas = document.getElementById(canvas); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight;}window.onload = window.onresize = resizeCanvas;

แอนิเมชั่นพื้นฐานทำให้ฉันเริ่มต้นได้

สี่ขั้นตอนในการสร้างภาพเคลื่อนไหว:

1. ล้างเนื้อหาแคนวาส โดยปกติจะใช้ clearRect()
2. บันทึกสถานะแคนวาส
3. วาดเนื้อหา
4. รีเซ็ตสถานะแคนวาส

สิ่งที่ฉันทำค่อนข้างง่าย โดยใช้เพียง 1 และ 3 เท่านั้น ซึ่งก็คือเคลียร์แคนวาสอย่างต่อเนื่องแล้วจึงวาดใหม่

 window.onload = function () { resizeCanvas(); window.requestAnimationFrame (วาด);}; ฟังก์ชั่น cleanCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height);} ฟังก์ชั่นวาด () { cleanCanvas (); // วาดสิ่งต่าง ๆ window.requestAnimationFrame (วาด);}

มีสามแบบ:

1. window.setInterval() หากไม่จำเป็นต้องมีการโต้ตอบกับผู้ใช้เลยและเพียงแค่วาดใหม่อย่างต่อเนื่อง แค่นี้ก็เพียงพอแล้ว
2. window.setTimeout() หากคุณต้องการให้การทำงานของผู้ใช้ เช่น คีย์บอร์ดและเมาส์ ส่งผลต่อแอนิเมชั่น คุณสามารถใช้สิ่งนี้ได้ (ฉันไม่เข้าใจ requestAnimationFrame ดีกว่าไหม)
3. window.requestAnimationFrame() จะบอกเบราว์เซอร์ว่าต้องทำอะไรก่อนที่จะวาดใหม่ในครั้งต่อไป ซึ่งก็คือการดำเนินการวาดภาพที่คุณกำหนดเอง

ตัวอย่างนี้ใน MDN ค่อนข้างเจ๋ง มันสามารถย้ายได้ และต่อไปนี้เป็นเพียงภาพหน้าจอ

ฉันเคยเห็นการพัฒนา Game Engine มาก่อน และฉันก็สร้างการห่อหุ้มเชิงวัตถุอย่างมีสติ สิ่งที่ใช้ที่นี่นั้นง่ายมาก

สิ่งพื้นฐานที่สุดคือเวกเตอร์แทนจุด/เวกเตอร์ในปริภูมิสองมิติ และสมาชิกของมันคือ x และ y เท่านั้น

บนพื้นฐานนี้ วงกลมแสดงถึงวงกลม จุดศูนย์กลางสมาชิก: เวกเตอร์แทนจุดศูนย์กลางของวงกลม รัศมี: ตัวเลขแทนรัศมี และความเร็ว: เวกเตอร์แทนความเร็ว

จากนั้นเพียงแค็ปซูลฟังก์ชันสมาชิกบางส่วนเพื่อการใช้งานของคุณเอง

TypeScript + Webpack + Webpack-dev-server ไม่ซับซ้อน เพียงอ้างอิงเนื้อหาต่อไปนี้:

1. Webpack/เริ่มต้นใช้งาน
2. เวบแพ็ก/ไทป์สคริปท์
3. เว็บแพ็ก/devServer
4. webpack-dev-เซิร์ฟเวอร์

นอกจากนี้ ฉันยังลองใช้ npx ซึ่งใช้ในการรันโปรแกรมปฏิบัติการ npm ในอดีต webpack ได้รับการติดตั้งทั่วโลก และคุณสามารถเรียก webpack xx ได้โดยตรง หากคุณติดตั้ง webpack ในเครื่อง คุณจะต้องดำเนินการผ่าน ./node_modules/ .bin/webpack หากต้องการเรียกใช้ webpack ในเครื่อง ตอนนี้คุณสามารถ npx webpack xxx ได้แล้ว

ในการกำหนดค่าของ devServer ฉันได้เพิ่ม hot: true เพื่อเปิดใช้งานการอัปเดตแบบด่วน ด้วยเหตุนี้ หน้าเว็บจึงได้รับแจ้ง: [HMR] Hot Module Replacement ถูกปิดใช้งาน

ฉันพบว่ามันเป็นหลุมพรางเก่า เมื่อฉันต้องการเรียกมัน ให้เพิ่มพารามิเตอร์บรรทัดคำสั่ง: webpack-dev-server --hot --inline

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network