3

Помогите пожалуйста разобраться с canvas'ом.

Написал такой скрипт:

const ctx = canv.getContext('2d');
const crossImg = new Image();
crossImg.src = 'data:image/jpeg;base64,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';
let xPos = Math.floor(Math.random() * 350);
let yPos = 300;
let a = 22;
let startA = a;
function draw(){

    if(yPos >= canv.height-75){
        startA -= 2;
        a = startA;
    }
    if(startA <= 0 ){
        startA = 0;
        a = 0;
    }
    yPos-=a;
    ctx.clearRect(0 , 0 , canv.width , canv.height);
    ctx.drawImage(crossImg ,xPos, yPos, 75, 75 );

    a -= 0.7;
    requestAnimationFrame(draw);

}
draw();

<canvas width=800px height=600px id="canvas"></canvas>

Скрипт в принципе работает , но как же сделать , чтобы можно было сделать несколько прыгающих элементов допустим с разной скоростью.

Картинку можно вставлять любую. Я понимаю , что как-то его нужно запихнуть в массив ,но как не понимаю.

Надеюсь на вашу помощь.

1
  • напишите в этом же методе еще одну отрисовку картинки в другим месте на канве 6 апр 2020 в 17:42

1 ответ 1

6

Переписал падение, а в целом так можно:

const canv = document.getElementById('canvas');
let w = canv.width = window.innerWidth - 20;
let h = canv.height = window.innerHeight - 20;
let ctx = canv.getContext('2d');

let crossImg = new Image();
crossImg.src = 'https://www.gravatar.com/avatar/35bf0665a75c3439070e28d27dca107b?s=64';

let num = 20;

crossImg.onload = () => {

  arr = [];
  
  for(let i = 0; i < num; i ++){// Задать несколько элементов с разными начальными данными
    arr.push({x : Math.floor(Math.random() * (w - 50)), // Начальное по X
              y : 0, // Начальное положение объекта по высоте
              t : 0, // Начальная скорость (время)
              k : Math.random()*0.5 + 0.1, // Коэффициент прирастания времени (ускорения)
              falling : true, // Состояние падения
              rising : false  // Состояние подъема
              });
  }
  
  function draw(){
     ctx.clearRect(0 , 0 , w , h); // Каждый кадр очищать экран

     // НАЧАЛО ЦИКЛА ПЕРЕБОРА ОБЪЕКТОВ В ОТРИСОВКЕ КАДРА!!!
     arr.forEach(obj => { // Для каждого объекта отрисовывать изображение
       if(obj.falling){
         obj.t += obj.k; // Прирастаем время на шаг 
         obj.y += obj.t*obj.t; // Меняем положение с учетом ускорения
         if(obj.y > h - 52){
           obj.y = h - 52;
           obj.falling = false;
           obj.rising = true;
           //obj.t /= 1.2; Здесь можно корректировать начальную скорость подъема
         }
      }
      
       if(obj.rising){
         obj.t -= obj.k + 0.1; // Дополнительно гасим скорость подъема
         obj.y -= obj.t*obj.t;
         if(obj.t <= 1){
            obj.t = 0;
            obj.rising = false;
            obj.falling = true;
         }
       }
       ctx.drawImage(crossImg ,obj.x, obj.y, 50, 50 ); // Отрисовываем объект
     }) // КОНЕЦ ЦИКЛА!!!


      window.requestAnimationFrame(draw);
  }
  draw();
}
<canvas id="canvas"></canvas>

Можно также добавить горизонтальный разброс и остановку по условию отдельных объектов. Когда останавливаются все объекты отменяем анимацию.

const canv = document.getElementById('canvas');
let w = canv.width = window.innerWidth - 20;
let h = canv.height = window.innerHeight - 20;
let ctx = canv.getContext('2d');

let crossImg = new Image();
crossImg.src = 'https://www.gravatar.com/avatar/35bf0665a75c3439070e28d27dca107b?s=64';

let num = 20;
let animation = null;

crossImg.onload = () => {

  arr = [];
  
  for(let i = 0; i < num; i ++){// Задать несколько элементов с разными начальными данными
    arr.push({x : Math.floor(Math.random() * (w - 50)), // Начальное по X
              y : 0, // Начальное положение объекта по высоте
              t : 0, // Начальная скорость (время)
              k : Math.random()*0.5 + 0.1, // Коэффициент прирастания времени (ускорения)
              falling : true, // Состояние падения
              rising : false,  // Состояние подъема
              left : Math.random() >= 0.5,
              right : !this.left
              });
  }
  
  function draw(){
     ctx.clearRect(0 , 0 , w , h); // Каждый кадр очищать экран

     // НАЧАЛО ЦИКЛА ПЕРЕБОРА ОБЪЕКТОВ В ОТРИСОВКЕ КАДРА!!!
     arr.forEach(obj => { // Для каждого объекта отрисовывать изображение
       if(obj.left){
          obj.x += 1;
          if(obj.x > w - 50){
              obj.left = false;
              obj.right = true;
          }

       } else if (obj.right){
          obj.x -= 1;
          if(obj.x < 0){
              obj.left = true;
              obj.right = false;
          }
       }

       if(obj.falling){
         obj.t += obj.k; // Прирастаем время на шаг 
         obj.y += obj.t*obj.t; // Меняем положение с учетом ускорения
         if(obj.y > h - 52){
           obj.y = h - 52;
           obj.falling = false;
           obj.rising = true;
           //obj.t /= 1.2; Здесь можно корректировать начальную скорость подъема
         }
      }
      
       if(obj.rising){
         obj.t -= obj.k + 0.05; // Дополнительно гасим скорость подъема
         obj.y -= obj.t*obj.t;
         if(obj.t <= 1){
            obj.t = 0;
            obj.rising = false;
            obj.falling = true;
         }
       }
       
       if(obj.y >= h - 52.1){
           obj.falling = false;
           obj.rising = false;
           obj.left = false;
           obj.right = false;
       }
       ctx.drawImage(crossImg ,obj.x, obj.y, 50, 50 ); // Отрисовываем объект
     }) // КОНЕЦ ЦИКЛА!!!
     
     animation = window.requestAnimationFrame(draw);
     
     if(arr.every(obj => !obj.falling && !obj.rising && !obj.left && !obj.right)){ // Проверяем двигается ли хоть один объект
         window.cancelAnimationFrame(animation); // Отменяем анимацию и ненужные расчеты в цикле.
         console.log('Анимация отменена!');
     }

  }
  draw();
}
  <canvas id="canvas"></canvas>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.