Как правильно оформить несколько одинаковых canvas на одной странице?

Question

[kamlauka]

Почему туча отображается только в последнем канвасе?
https://codepen.io/kamlauka/pen/PBOZVr

Comments

[kamlauka]

И вообще, насколько такой способ задания нескольких canvas оптимален? Будет ли быстрее работать браузер, если нарисовать облака на одном канвасе?

[Niriter Inc.]

kamlauka, в firefox не работают облака) ни в одном кэнвасе

[Niriter Inc.]

kamlauka, проверил в 3х бразерах (edge,firefox,opera) и нигде не показывают облака... ни в первом ни в последнем canvas-е

[kamlauka]

Niriter Inc., может сползают гады из-за разрешения? У тебя какое?

[Niriter Inc.]

kamlauka, ноут: 1366х768

Answer 1

[0xD34F]

const cloud1 = new Image()
const cloud2 = new Image();
const cloud3 = new Image();
cloud1.src = 'http://i.imgur.com/GigS3KR.png';
cloud2.src = 'http://i.imgur.com/y3JAe69.png';
cloud3.src = 'http://i.imgur.com/v30JIWp.png';

const canvases = document.querySelectorAll('.canvas');
const canvasSize = document.documentElement.clientWidth;

for (const n of canvases) {
  n.setAttribute('width', canvasSize);
  n.setAttribute('height', canvasSize);
}

let ts0;
window.requestAnimationFrame(function draw(ts) {
  for (const n of canvases) {
    ts0 = ts0 || ts;
    const dt = ts - ts0;

    const ctx = n.getContext('2d');

    ctx.clearRect(0, 0, canvasSize, canvasSize);

    ctx.save();
    ctx.translate(50, 50 + Math.sin(dt / 500) / 20);
    ctx.rotate(Math.sin(dt / 340) / 200);
    ctx.drawImage(cloud1, 0, 0, canvasSize * 0.95, canvasSize * 0.95);
    ctx.restore();

    ctx.save();
    ctx.translate(5, 0 + Math.sin(dt / 382) * 2);
    ctx.rotate(Math.sin(dt / 630) / 40);
    ctx.drawImage(cloud2, 150, 100, canvasSize * 0.84, canvasSize * 0.84);
    ctx.restore();

    ctx.save();
    ctx.translate(8, 150 + Math.sin(dt / 198) * 3);
    ctx.rotate(Math.sin(dt / 500) / 450);
    ctx.drawImage(cloud3, 0, 0, canvasSize * 0.7, canvasSize * 0.7);
    ctx.restore();
  }

  window.requestAnimationFrame(draw);
});

Comments

[kamlauka]

Блиииин, точно, только же недавно про let читала, спасибо огромное!!!))