Поделиться ядром кода для эффекта снежинок на canvas

Без weiterer Worte, посмотрите на код:

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)
 });
 }
 //Apply these properties to each snowflake
// 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();
// }
 //Если написать так, то анимация не будет работать
 //Чтобы реализовать анимацию, нужно изменить свойства каждого снежногоflake
 //Установить таймер, который будет изменять свойство периодически
 var timer = setInterval(function () {
 snow();
 //Чтобы реализовать анимацию, сначала нужно очистить содержимое канвы
 ctx.clearRect(0, 0, maxW, maxH);
 //Каждый снежныйflake каждые 16ms должен изменять свойство
 //Изменение координат x, y, это требует нового значения для вычислений, изменяя их значения
 //Чтобы избежать повторного определения, используйте snows.radius для вычислений
 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 Здесь можно связать изменение x и y с помощью snows.deg
 //Таким образом, каждая снежинка будет следовать своей траектории, также можно отдельно определить, чтобы все траектории снежинок были одинаковыми
 var xChange = Math.tan(toRd(snows[i].deg)) * yChange; //Эта тригонометрическая формула была протестирована, и tan наиболее подходяща
 snows[i].top += yChange;
 snows[i].left += xChange;
 //После вышеуказанных шагов координаты x, y каждой снежинки изменились, с течением времени,
 //Снежинки вылетят за рамки канвы, снежинки в конце исчезнут, здесь нужно сделать проверку, удалить снежинки, которые вылетели за рамки снежинок
 //Удалите его, затем добавьте новую снежинку, этот шаг выполняется в конце, здесь только выполняется проверка
 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)
 }
 }
 }
 }

Вот и все, что было в этой статье. Надеюсь, что содержимое статьи поможет вам в изучении или работе, и также ждем вашей поддержки учебника Yaan!

Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, автоматически загружен, сайт не имеет права собственности, не был отредактирован вручную и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите содержимое,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. При подтверждении факта нарушения сайт немедленно удаляет涉嫌侵权的内容。