HTML5 Холст - динамика c фон + расположение элементов - PullRequest
Новая
       7

HTML5 Холст - динамика c фон + расположение элементов

1 голос
/ 07 мая 2020

Я пытаюсь запрограммировать небольшую html5 холст-игру и сталкиваюсь с некоторыми трудностями с динамическим размером фона c и позиционированием объектов - возможно, я немного ошибся в своем мышлении, но я надеюсь, что вы можете помочь. вот мой код: 

var canvas = document.getElementById("background");
var c = canvas.getContext('2d');



canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var background = new Image();
background.src = "https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg";

function scaleToFill(img){
    // get the scale
    var scale = Math.max(canvas.width / background.width, canvas.height / background.height);
    
    c.drawImage(img, 0, 0, background.width * scale, canvas.height );
}


background.onload = function(){
    scaleToFill(this);
    c.fillRect(100, 100, 100, 100);
}
body {
    margin: 0;
    padding: 9;
    width:  100%;
    height: 100%;

}
canvas {
    border:1px solid #000;
}
   <canvas id="background" style="z-index: -1; position:fixed; top:0;left:0;">  
    </canvas>

pretty basi c - мой код пытается масштабировать bg pi c до полной высоты. Теперь, но из-за этого масштабирования каждый другой элемент, например тестовый прямоугольник, который я рисую, находится в разных положениях в зависимости от размера экрана.

Кто-нибудь знает, как я могу решить эту проблему с помощью другого подхода, не имея c высоты и ширины? Или существует система js, которая может сделать это намного проще?

1 Ответ

0 голосов
/ 07 мая 2020

Как только вы go этот маршрут, все должно быть пропорционально или относительно ширины и высоты ...

См. Мой пример ниже, я все еще рисую прямоугольник, как и вы, с абсолютным положением
Но я также рисую круг в середине холста.

Если вы создаете игру, вам придется принимать решения, что является относительным, а что нет 

var canvas = document.getElementById("background");
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var background = new Image();
background.src = "https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg";


background.onload = function(){
  var scale = Math.max(canvas.width / background.width, canvas.height / background.height);
  c.drawImage(this, 0, 0, background.width * scale, canvas.height );
  
  // absolute position
  c.fillRect(10, 10, 50, 50);
  
  // fixed position with relative size 
  c.fillRect(10, 80, 1000*scale, 200*scale);
  
  // relative position with fixed radius
  c.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI*2);
  c.stroke()
}
<canvas id="background">    </canvas>

Возможно, посмотрите игровые движки, они могут сэкономить вам много времени:
https://github.com/collections/javascript-game-engines

...