我应该如何创建一个响应画布与createJs适应不同的移动设备的屏幕？ [英] How should I create a responsive canvas with createJs to adapt different mobile device's screens?

问题描述

我想开发一个html5手机游戏。如你所知，移动设备的屏幕尺寸不同，因此我想创建一个响应式画布，以适应不同的屏幕。

I want to develop a html5 mobile game. As you know, the screens of mobile devices are different size, so I want to create a responsive canvas so that it can adapt different screen.

推荐答案

最简单的方法是使用JavaScript根据视口调整画布大小，然后回流内容。

The simplest way is to resize your canvas with JavaScript, based on the viewport, and then reflow the contents.

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/

Here is a simple example. It is a bit different than the sample code to make it work in a resizing window. http://jsfiddle.net/lannymcnie/4yy08pax/

如果你正在处理移动设备，还有一些其他的事情需要考虑（他们自动缩放画布来解释他们的高DPI）。

If you are dealing with mobile devices, there are some other things to consider (they auto-scale canvases to account for their high DPI).

希望这有助。

这篇关于我应该如何创建一个响应画布与createJs适应不同的移动设备的屏幕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！