Javascript图像放置答案

【问题标题】：Javascript Image PlacementJavascript图像放置
【发布时间】：2015-03-05 05:24:33
【问题描述】：

所以我正在构建一个益智管道游戏，并希望每个关卡都有不同的背景。背景是从 img src 加载的，唯一的问题是此时的图像不会随屏幕尺寸移动......我总是希望它居中，这样你就可以看到图像的中间。

例如，在 13 英寸屏幕上看起来完美的背景在 27 英寸屏幕上看起来一团糟……有没有一种简单的方法可以将图像保持在同一个地方？我知道我可以设置一个 css 规则，但是想知道是否有办法将它添加到 js 脚本中？

到目前为止，我的 js 脚本看起来像这样（一级）：

var levels = {
level1: {
            level: [[["0","1","0","1"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","1","1"],["0","1","1","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","0","0"],["0","0","1","1"],["1","1","0","0"],["0","0","0","0"],["0","0","0","0"],["0","0","0","0"]],[["0","0","0","0"],["0","0","0","0"],["0","0","1","1"],["1","0","1","0"],["1","0","1","0"],["1","1","0","0"]]],
            backgroundURL : "http://website.co.uk/client_files/level1.jpg"
        },

谢谢

【问题讨论】：

看起来一团糟怎么办？是重复的吗？不是居中吗？图像应该随着调整大小而增长还是在保持居中的同时保持一致的大小？
对不起，我应该解释每次都需要生成管道（因此是 0 和 1）我的主要问题是如何在保持 js 居中的同时调整图像大小

标签： javascript jquery css image

【解决方案1】：

如果您希望您的游戏始终位于屏幕中间，关注这篇文章： https://css-tricks.com/positioning-offset-background-images/

假设你有一个<div id="game"></div> 作为你的画布

设置一个基本 css 以使元素背景居中

#game{
    background-color: lightgray;
    background-position: center center;
    background-repeat: no-repeat;
    width: 80%;
    height: 80%;
    position:absolute;
}

javascript 代码将非常简单只需获取主要元素并仅更新图片网址

var canvas = document.querySelector('#game');

canvas.style.backgroundImage = " url('"+levels.level1.backgroundURL+"')";

// simulate a level change after 3 seconds
setTimeout(function(){
    canvas.style.backgroundImage = "url('"+levels.level2.backgroundURL+"')";
}, 3000);

在这里查看运行代码： http://jsfiddle.net/zw7dv9at/2/

【讨论】：

抱歉，以我的工作脚本中的 js 代码为例进行了更新