Как создать отзывчивый холст с помощью createJs для адаптации экранов разных мобильных устройств?

Question

Я хочу разработать мобильную игру html5. Как вы знаете, экраны мобильных устройств различного размера, поэтому я хочу создать отзывчивый холст, чтобы он мог адаптироваться к другому экрану.

Answer 1

Простейший способ - изменить размер вашего холста с помощью JavaScript на основе видового экрана, а затем оплатить содержимое.

var w = $("#container").width(); 
var h = $("#container").height(); 

stage.canvas.width = w; 
stage.canvas.height = h; 

// Simple "fit-to-screen" scaling 
var ratio = contentWidth/contentHeight; // Use the "default" size of the content you have. 
var windowRatio = w/h; 
var scale = w/contentWidth; 
if (windowRatio > ratio) { 
    scale = h/contentHeight; 
} 
content.scaleX = content.scaleY = scale; 

Вот простой пример. Это немного отличается от кода примера, чтобы заставить его работать в окне изменения размера. http://jsfiddle.net/lannymcnie/4yy08pax/

Если вы имеете дело с мобильными устройствами, вам необходимо рассмотреть некоторые другие вещи (они автоматически масштабируют холсты для учета их высокого DPI).

Надеюсь, что это поможет.