Javascript 图像作为游戏世界背景，缩放精灵（项目）

我正在用javascript/canvas制作（我的第二个）游戏（逃离房间）。背景图像=游戏世界（宽度/高度）。因此，如果我将游戏大小从2300x1080更改为2500x1080，则门之类的项目/对象不会扩展。门图像未覆盖孔（出口）

mycode html：

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

演示：

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

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

2） 门宽度*（游戏宽度/绘图面宽度）

我应该使用canvas.transform（）（矩阵）吗？如果更改游戏世界大小（背景），如何计算项目/对象的新x、y、宽度和高度？有什么想法吗？我不需要示例（但如果有人有时间，请更新我的JSFIDLE…）

新图像应该是
新图像（）

下面是更新，使用

transform:scale（）更改
的大小
您可以尝试计算所需比例的百分比并更新该值

---

你需要的是x和y的比值（canvasWidth/bgWidth），然后你将所有的值（x，y，width，height）乘以这两幅图像上的比值，就得到了。不回答，因为你的密码上有太多的信息。。。（检查图像是否已加载，不要像那样运行无用的rAF循环等）

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);     
};