2

Есть 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">

1 ответ 1

3

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">

Ваш ответ

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

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