Question

我在javascript / canvas中制作（我的第二个）游戏（逃离房间）。背景图片=游戏世界（宽度/高度）。因此，如果我将游戏大小从2300x1080更改为2500x1080，则像门一样的物品/物体不会延伸。门图像未覆盖孔（出口）。

mycode html：

<canvas id="drawSurface" width="1920" height="1080"></canvas>

javacript

var canvas = document.getElementById("drawSurface").getContext('2d');
// images
var bg = new Image;
    bg.src = "http://s10.ifotos.pl/img/bgpng_aerpsqq.png";
var door = new Image;
    door.src = "http://img.bizator.com/a/2002865733/w500/3-front-door-and-plastic-windows.jpg";

// game world
var game = {
    width: 2300,
    height:1080,
}

example();

function example(){
    window.requestAnimationFrame(example);

    canvas.clearRect(0,0,window.screen.width,window.screen.height);

    canvas.drawImage(bg,-200,0,game.width, game.height);
    canvas.drawImage(door,1330,503,door.width,door.height);     
};

演示：PR

如何正确缩放背景+精灵（项目）。我试过这个（但效果不好）：

1）door.width +（game.width / canvas.width）

2）door.width *（game.width / drawSurface.width）

我应该使用canvas.transform（）（矩阵）吗？如果我改变游戏世界大小（背景），我如何计算物品/物体的新x，y，宽度，高度？有任何想法吗？我不需要例子（但如果有人有时间请更新我的jsfiddle ......）

Answer 1

new Image;应该是new Image();
这是更新https://jsfiddle.net/01sLdpb8/39/，使用<canvas>更改transform: scale();的大小您可以尝试计算所需比例的百分比并更新值。

图像作为游戏世界背景，规模精灵（项目）

1 个答案: