Как в анимацию c canvas включить изображение?

Question

Есть canvas с анимацией отскока от стены мячика. Как сделать так, чтобы вместо мячика гулял по экрану дед мороз (img картинка), а при соударении об стенку сменялся на елку на голубом фоне и зациклено при новом столкновении со стенкой снова была смена на деда мороза на белом фоне?

Передаю объект изображения

ctx.drawImage(santa, 120, 340);

А как заставить его двигаться?

И доп вопрос: что нужно сделать, чтобы при клике на картинку с (дедом морозом/елкой) останавливалась анимация и появлялась надпись "Счастливого нового рода и Рождества"

var can = document.querySelector("canvas");
var ctx = can.getContext("2d");

var canvasWidth = can.width;
var canvasHeight = can.height;

var radius = 30;
var pX = 60;
var pY = 50;

var vX = 3;
var vY = 3;

var santa = document.querySelector(".santa");
var tree = document.querySelector(".tree");

function draw() {
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  ctx.beginPath();
  ctx.drawImage(santa, 120, 340);
  ctx.drawImage(tree, 120, 340);
  ctx.fillStyle = "red";
  ctx.arc(pX, pY, radius, 0, Math.PI * 2, false);
  ctx.fill();
  ctx.closePath();
}


function animate() {


  if (pY >= canvasHeight - radius || pY <= radius) {
    vY = -vY;
  }


  if (pX > canvasWidth - radius || pX < radius) {
    vX *= -1;
  }

  pX += vX;
  pY += vY;

  draw();
  requestAnimationFrame(animate);
}

animate();

<canvas style="border-style: solid;" width="240px" height="400px"></canvas>
<img class="santa" src="https://i.pinimg.com/originals/0e/f6/c1/0ef6c11df3a2fb3ce04de96cf620ac65.jpg" width="80">
<img class="tree" src="https://img1.labirint.ru/rcimg/e20fb45c1ff31a0789cab36beb9cda1f/960x540/books73/726265/ph_01.jpg?1574439967" width="80">

Answer 1

ctx.drawImage(santa, 120, 340); — Не указаны размеры картинок и они рисуются в оригинальном масштабе. А 120 и 340 — координаты верхнего левого угла картинки. Они у вас уходят за рамки canvas, из-за чего не отображаются.
Должно быть ctx.drawImage(santa, 120, 340, ширина_картинки, высота);

Около того:

let cnv = document.querySelector("canvas");
let ctx = cnv.getContext("2d");

const WID = cnv.width;
const HEI = cnv.height;
const IMG_WID = 80;
const IMG_HEI = 116;

let index = 0, img = document.querySelectorAll("img");
// удар об стену переключит index, начнет рисоваться другая картинка.

let x = 0, y = 0; // координаты верхнего левого угла картинки.
let vx = 3, vy = 3; // Условная скорость.
let stop_animation = false;

(function animate() {
  if (stop_animation) return;
  
  if (x >= WID - IMG_WID || x < 0) {
    vx *= -1;
    index ^= 1; // фокус =)      1^1 → 0      0^1 → 1
    // Можно записать index = index == 0 ? 1 : 0;
  }
  
  if (y >= HEI - IMG_HEI || y < 0) {
    vy *= -1;
    index ^= 1;
  }

  x += vx;
  y += vy;

  ctx.clearRect(0, 0, WID, HEI);  
  ctx.drawImage(img[index], x, y, IMG_WID, IMG_HEI);
  
  requestAnimationFrame(animate);
})();

cnv.addEventListener("click", function(e) {
  click_x = e.pageX - cnv.offsetLeft;
  click_y = e.pageY - cnv.offsetTop;
    
  let img_clicked = (
    x <= click_x && click_x <= (x + IMG_WID) &&
    y <= click_y && click_y <= (y + IMG_HEI)
  );
  
  if (img_clicked) {
    stop_animation = true;
    alert("Счастливого нового рода и Рождества");
  }
});

img {
  display: none;
}

<canvas style="border-style: solid;" width="240" height="400"></canvas>

<img src="https://i.pinimg.com/originals/0e/f6/c1/0ef6c11df3a2fb3ce04de96cf620ac65.jpg">
<img src="https://img1.labirint.ru/rcimg/e20fb45c1ff31a0789cab36beb9cda1f/960x540/books73/726265/ph_01.jpg?1574439967">

БЛОГ НА HUSL

Как в анимацию c canvas включить изображение?

Ответы (1 шт):