مشاركة رمز تأثير الثلوج في canvas

لا أريد الحديث كثيرًا، أنظر إلى الكود:

var ca = document.getElementById("ca");
 var ctx = ca.getContext('2d');
 // دالة لإنشاء عدد عشوائي بين n و m
 function random(n,m){
 return Math.floor(Math.random() * (m - n) + n);
 }
 // دالة تحويل الزاوية إلى دالة مكانية
 function toRd(angle){
 return angle * Math.PI / 180;
 }
 // ضبط المتغيرات لتخزين أبعاد الرسم البياني الأكبر
 var maxH = ca.height;
 var maxW = ca.width;
 // الخاصية التي يمتلكها كل قطرة ثلج
 // x, y، قطر قطرة الثلج، الزاوية،
 // يجب إنشاء 100 قطرة ثلج أولاً
 var snows = [];
 for(var i=0;i<200;i++){
 snows.push({
 "left": random(0, maxW),
 "top": random(0, maxH),
 "deg": random(-20, 20), //هذا هو الدور الذي يلعبه في تحديث البيانات
 "radius": random(2, 10)
 });
 }
 // تطبيق هذه الخاصيات على كل قطرة ثلج
// for(var i=0;i<snows.length;i++) {
// var r = snows[i].radius;
// var x = snows[i].left;
// var y = snows[i].top;
// var ra = ctx.createRadialGradient(x, y, r / 4, x, y, r);
// ra.addColorStop(0, "rgba(255,0,0,1)");
// ra.addColorStop(1, "rgba(255,0,0,0.1)");
// ctx.fillStyle = ra;
// ctx.beginPath();
// ctx.arc(x, y, r, 0, 2 * Math.PI);
// ctx.fill();
// }
 // إذا كتبت بهذا الشكل لن يكون هناك تأثير حركة
 // لتحقيق تأثير الحركة يجب تغيير الخاصية لكل قطرة ثلج
 // ضبط定时ية لتغيير الخاصية بشكل دوري
 var timer = setInterval(function () {
 snow();
 // لتحقيق تأثير الحركة يجب إزالة محتوى الرسم البياني
 ctx.clearRect(0, 0, maxW, maxH);
 // كل قطرة ثلج يجب أن تتغير كل 16ms الخاصيتها
 // هذا يحتاج إلى قيمة جديدة لل계산، يجب تغيير قيمتها
 // لتجنب إعادة التعريف، يتم استخدام snows.radius لتحديد إحداثيات x, y
 for (var i = 0; i < snows.length; i++) {
 // في البداية، كل ثلج لديه إحداثيات x, y وعرض r
 // لا يمكن كتابة هذا الشكل، بيانات الثلج التالية ستلغي الأولى، هذا الخطأ تم ايجاده بعد فترة طويلة من البحث
// var r = snows[i].radius;
// var x = snows[i].left;
// var y = snows[i].top;
// var d = snows[i].deg;
 // تغيير y
 var yChange = 0.5 * snows[i].radius;
 // تغيير x هنا يمكن ربطه بمتغير yChange من خلال snows.deg
 // لذا يمكن لكل ثلج أن يتحرك على مسارته الخاصة، أو يمكن تحديد مسار كل ثلج بشكل منفرد، يمكن أن تكون مسارات الثلج متشابهة
 var xChange = Math.tan(toRd(snows[i].deg)) * yChange; // هذه المعادلة الهندسية تم اختبارها وتبين أن tan هي الأنسب
 snows[i].top += yChange;
 snows[i].left += xChange;
 // بعد هذه الخطوات، يتم تغيير إحداثيات كل ثلج x, y، مع مرور الوقت،
 // الثلج سيخرج من اللوحة، وسيختفي الثلج في النهاية، يجب اتخاذ قرار بخصوص ذلك، إزالة الثلج الذي يتجاوز اللوحة من snows
 // إزالة ما فيه، ثم إضافة ثلج جديد، هذه الخطوة تتم في النهاية، هنا فقط يتم التحكم
 if (snows[i].left < 0 || snows[i].left > maxW || snows[i].top > maxH) {
 // هنا x<0 لأن xChange قد يكون قيمة سلبية
 if(i>0){
  snows.splice(i--, 1);
  continue;// إذا تجاوزت النطاق
  // لا داعي للتعامل مع هذا الثلج بعد الآن، لذا يمكن تقليل استهلاك الأداء بهذا التحكم
 }
 }
 //بدء الرسوم
 عندما يتم إنشاء راديال جراديانت var ra = ctx.createRadialGradient(snows[i].left, snows[i].top, snows[i].radius / 4, snows[i].left, snows[i].top, snows[i].radius);
 ra.addColorStop(0, "rgba(255,255,255,1)");
 ra.addColorStop(1, "rgba(255,255,255,0.1)");
 ctx.fillStyle = ra;
 ctx.beginPath();
 ctx.arc(snows[i].left, snows[i].top, snows[i].radius, 0, 2 * Math.PI);
 ctx.fill();
 }
 }, 16);
 //زيادة عدد الثلوج
 //هذا هو إضافة أعضاء إلى قائمة snows
 function snow(){
 if(snows.length<220) {
 var l = 220 - snows.length;
 for(var i=0;i<l;i++){
 snows.push({
  "left": random(0, maxW),
  "top": 0,
  "deg": random(-20, 20), //هذا هو الدور الذي يلعبه في تحديث البيانات
  "radius": random(2, 10)
 }
 }
 }
 }

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون محتوى هذا المقال قد ساعدكم في تعلم أو عملكم، ونأمل أيضًا أن تشجعوا دائمًا على دعم تعليمات النفخ!

بيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية الملكية مملوكة للمالك الأصلي، المحتوى تم تقديمه من قبل مستخدمي الإنترنت بشكل متعاوني وتحميله من قبلهم، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية مرتبطة بذلك. إذا اكتشفت محتوى يشتبه في انتهاك حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (الرجاء استبدال #بـ @ عند إرسال البريد الإلكتروني) لإبلاغنا، وقدم الدليل على الأدلة، وسنقوم بإزالة المحتوى المزعوم عن حقوق النسخ فور التحقق من ذلك.