我应该如何使用 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屋！