JS Game 使用 CSS 而不是 JS 将响应的高度和宽度设置为画布答案

【问题标题】：JS Game set responsive height and width to canvas using CSS instead of JSJS Game 使用 CSS 而不是 JS 将响应的高度和宽度设置为画布
【发布时间】：2016-10-27 01:01:10
【问题描述】：

我有一个由其他人编写的示例游戏脚本，用于使用 phaser.js。我主要是 HTML/CSS 人，我的 JS 知识非常基础。现在游戏使用JS在画布上指定高度和宽度“832”和“508”。我希望游戏具有响应性，即使用 CSS 设置高度和宽度。

这就是我对游戏的称呼：

    <div class="game-box">
         <div class="game-container">
              <div id="phaser-div">

              </div>
         </div><!-- end game-container -->
    </div><!-- end game-box -->

这是游戏的脚本：

var game = new Phaser.Game(832, 508, Phaser.WEBGL, 'phaser-div', { preload: preload, create: create, update: update });

var background;
var filter;

function preload() {

    var urlBase = location.href.substring(0, location.href.lastIndexOf("/") + 1);
    game.load.image('phaser', urlBase + 'games/game001/game001-logo.png');
    game.load.script('filter', urlBase + 'games/game001/marble.js');

    this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.setShowAll(); window.addEventListener('resize', function () { this.game.scale.refresh(); }); this.game.scale.refresh();
}

function create() {

    var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
    logo.anchor.setTo(0.5, 0.5);

    background = game.add.sprite(0, 0);
    background.width = 832;
    background.height = 508;

    filter = game.add.filter('Marble', 832, 508);
    filter.alpha = 0.2;

    //  The following properties are available (shown at default values)

    //  filter.speed = 10.0;
    //  filter.intensity = 0.30;

    background.filters = [filter];

}

function update() {

    filter.update();

}

我尝试在 CSS 中使用“#phaser-div canvas”选择器设置宽度和高度，但没有成功。让我知道这怎么可能。

非常感谢。

【问题讨论】：

这与 canvas 具有 width 和 height 属性有关。改用 sytle.width
所以我应该改变 background.width = 832;到 background.style.width = 832 和 background.height = 508;到 background.style.height=508？还有什么需要修改的地方吗？
没错。 canvas 具有控制点矩阵的属性。不幸的是，这些被称为宽度和高度，这是您的困惑的来源。

标签： javascript jquery html css

【解决方案1】：

您也可以使用$(HTMLElement).height()和$(HTMLElement).width()来接收元素的高度和宽度，以便做出相应的响应。这使您可以避免使用静态值（像素），而是使用灵活的布局（以 % 或 vw 定义尺寸）。

【讨论】：

您能否对我在问题中编写的 JS 代码进行更改，因为我是一名 HTML/CSS 人员，并且我的 JavaScript 知识非常基础。非常感谢！