في الآونة الأخيرة ، رأيت رسومًا رسومًا على شبكة الجسيمات رائعة للغاية ، وقد صنعت واحدة ، وكانت جيدة مثل الخلفية. لا يمكن لـ CSDN تحميل أكثر من 2 مليون صورة ، لذا ببساطة قطع صورة ثابتة:
لنبدأ في تحديد كيفية تحقيق هذا التأثير:
بادئ ذي بدء ، بالطبع ، أضف قماشًا:
<canvas id = canvas> </tanvas>
النمط التالي:
<Styled> #CANVAS
دور z -index: -1 من القماش أعلاه هو أنه يمكن وضعه تحت خلفية بعض العناصر.
من أجل التأكد من أنه يمكن ملء قماش المتصفح بأكمله ، من الضروري ضبط الارتفاع الواسع للقماش على نفس المتصفح:
وظيفة getSize () {w = canvas.width = window.innerwidth ؛ما سبق W و H يمثلان عرض المتصفح.
احصل على عرض المتصفح ، والخطوة التالية هي رسم الجزيئات.
var opt = {particleamount: 50 ، // عدد الجسيمات الافتراضية: 1 ، // متغيرات سرعة حركة الجسيمات: 1 ، // متغير حركة الجسيمات: RGB (32،245،245) ، // لون الجسيمات Linecolor: RGB (32،245،245) ، // لون اتصال الشبكة DefaultRadius: 2 ، // variantradius نصف قطر الجسيمات: 2 ، // متغير دائرة نصف قطرها الجسيمات: 200 // المسافة الدنيا بين الجسيمات} ؛تتمثل متغيرات السرعة ومتغيرات دائرة نصف قطرها أعلاه في التأكد من أن حجم وسرعة الجزيئات ليسوا متماثلين تمامًا.
ثم نقوم بإنشاء فئة لتهيئة الجسيمات.
وظيفة partical () {this.x = math.random ()*w ؛ .peed = OptionSpeed + Opt.variantspeed*Math.Random () ؛ color = opt.particlecolor ؛ ) ، // سرعة الجسيمات في x -axis y: this.speed * math.sin (this.directionangle) // سرعة الجسيمات في y -axis} this.update = function () {// وظيفة تحديث الجسيمات this.border () ؛ لحظة this.y += this.vector.y ؛ (this.x> = w || this.x <= 0) {// الرقم السلبي this.vector.x *= -1 ؛} if (this.y> = h || this.y <= 0) {// إذا وصلت إلى الحدود العلوية والسفلية ، اجعل سرعة المحور y في الرقم السلبي الأصلي هذا. هو تشغيل نافذة المتصفح في حجم الحجم ، وسيتم إخفاء بعض الجزيئات بعد حجم النافذة. if (this.x <0) {this.x = 0 ؛} if (this.y <0) {this.yy = 0 ؛} this.draw = function () {// ارسم وظيفة الجسيمات ctx. BeginPath () ؛1. يتم إنشاء السرعة الأولية وزاوية كل جسيم بشكل عشوائي ، ويتم تحديد لون الجسيمات بواسطة خيارات الإعداد ذات الصلة.
2. هذا. وبالمثل ، إذا كان هذا.
يتم استخدام this.update لتحديث إحداثيات الموضع التالي لكل جسيم. أولاً ، يتم إجراء الكشف عن الحافة ؛
3. قد يتسبب تكبير النافذة في تجاوز الجزيئات الحدود ، بحيث لا يمكن التقاط وظيفة اكتشاف الحافة ، لذلك كانت هناك حاجة إلى سلسلة من العبارات لاكتشاف هذا الموقف وإعادة ضبط موضع الجسيمات إلى حدود اللوحة الحالية.
4. ارسم هذه النقاط على القماش في الخطوة الأخيرة.
تمت كتابة جزيئات الجسيمات ، وسوف يرسمه أدناه:
وظيفة init () {getSize () ؛التهيئة أعلاه لـ OPT.ParticalAmount لها كائن جسيم ، والذي يهيئة الكائن ولكنه غير مرسوم.
Function Loop () {ctx.clearrect (0،0 ، w ، h) ؛ draw () ؛} window.requestanimationFrame (loop) ؛}في كل مرة يتم تنفيذ وظيفة الحلقة () ، سيتم إزالة المحتوى الموجود على القماش ، ثم يتم إعادة حساب إحداثيات الجسيمات من خلال وظيفة التحديث () لكائن الجسيمات ، ويتم رسم الجسيمات من خلال وظيفة السحب () من كائن الجسيمات. ما يلي هو التأثير في هذا الوقت:
ومع ذلك ، بعد تغيير حجم نافذة المتصفح ، ستختفي بعض الجسيمات.
Window.AdDeventListener (تغيير حجم ، وظيفة () {winResize ()} ، false) ؛ثم تحتاج إلى كتابة وظيفة WinResize والمزيد من الأداء المستهلك. حجم المتصفح.
var particlle = [] W ، H ؛ الارتفاع ، هناك مقدمة عن} ، تأخير)} في الجزء العلوي من المقالة
وبهذه الطريقة ، يتم الانتهاء من الرسوم المتحركة للجسيمات ، وبعد ذلك يمكننا رسم خط بين الجزيئات. سوف يرسمها بينهما.
لذا ، كيفية حساب المسافة بين الجسيمين ، يمكنك التفكير في الدرس الأول لرياضيات المدارس الثانوية المبتدئة ، ونظرية الذروة ، والمربع والمربع والمثلث الأيمن للمثلث الأيمن يساوي مربع مربع التغيير الثالث.
نحن نعرف الآن إحداثيات المحور X والمحور Y لكل جسيم ، ثم يمكننا حساب المسافة بين النقطتين ، وكتابة وظيفة ، ونمر النقطتين ، على النحو التالي:
وظيفة getDistance (point1 ، point2) {return math.sqrt (math.pow (point1.x -point2.x ، 2) + math.pow (point1.y -point2.y ، 2)) ؛}الآن يمكننا حساب المسافة بين نقطتين ، لذلك نقوم بحساب المسافة بين كل جسيم وجميع الجسيمات الأخرى لتحديد ما إذا كانت بحاجة إلى الاتصال. إنه قبيح قليلاً ، حتى نتمكن من تحديد شفافية الاتصال وفقًا للمسافة بين الجسيمين. لن يتم عرض مسافة معينة.
نقطة خط (نقطة ، Hub) {for (دعني i = 0 ؛ i <hub.length ؛ i ++) (if (opatity> 0) {ctx.linewidth = 0.5 ؛ ctx.strokestyle = rgba (+line [0]+،+line [1]+،+line [2]+،+opacity+) ؛ ctx.beginpath () ؛ }}}}}}}}المعلمتان المرسلتان أعلاه هما نقطة واحدة ونقطة كاملة ، مما يترك التعتيم = 1 -Distance/Optionistance ؛ هو سلبي ، ويتم تصفية الأحكام التالية.
var line = Option.linecolor.match (// d+/g) ؛
أخيرًا ، يتم توزيع مسافة حساب المسافة بشكل مستمر في وظيفة الحلقة ().
Function Loop () {ctx.clearrect (0،0 ، w ، h) ؛ draw () ؛} لـ (دع i = 0 ؛ i <internal.length ؛ i ++) {// أضف نقطة الخط الدورية هذه (الجسيمات [i] ، الجسيمات)}.تجدر الإشارة إلى أنه إذا أضفت الكثير من النقطة إلى/أو أو مسافة اتصال أكثر من اللازم (ستقوم مسافة الاتصال بإنشاء الكثير من الخطوط) ، فلن يتم تنفيذ الرسوم المتحركة. عندما يضيق منفذ العرض ، من الأفضل تقليل سرعة حركة الجزيئات: كلما كانت حجم الجسيمات أصغر ، ويبدو أن سرعة الحركة في المساحة الضيقة أسرع.
إظهار الكود بأكمله:
<! 0 ؛ Canvas) ؛ ) ، // لون الجزيئات linecolor: RGB (32،245،245) ، // لون الشبكة التي تربط اللون defaultradius: 2 ، // نصف قطر الجسيمات variantradius: 2 ، // العقل المتغير لنصف قطر الجسيمات: 200 / / السلك المتصاعد بين الجزيئات. ؛ () {getSize (getSize) ؛ i <signle.length ؛ pointpoint (الجسيمات [i] ، الجسيمات)} window.requestanimationFrame (loop) ؛} نقطة خط الوظيفة (نقطة ، hub) Hub [i]) ؛ +خط [2] ،+عتامة+) ؛ .closepath () ؛ -Point2.y ، 2) ؛} getTize () {w = canvas X -axis إحداثيات الجسيمات this.y = Math.Random ()*H ؛ حركة الجسيمات هي. .defaultradrad ius+Math. الجسيمات في x -axis y: this.peed* math. الجسيمات this.border () اللحظة التالية this.y += this.vector.y ؛ هل يصلون جميعًا إلى الحدود إذا (this.x> = w || this.x <= 0) {// إذا وصلت إلى الحدود اليمنى واليسر .Vector.x *= -1 ؛} if (this.y> = h || this.y <= 0) {// إذا وصلت إلى الحدود العلوية والسفلية ، فإن سرعة المحور y الرقم السلبي الأصلي this.vector.y *= -1 ؛ ، بحيث يمكنه عرض this.x = w ؛} if (this.y> h) {this.y = h ؛} if (this.x <0) {this.x = 0 ؛} if (this.y <0) {this.y = 0 ؛ 0 ، Math.PI 2) ؛ما سبق هو كل محتويات هذا المقال.