图像作为游戏世界背景，缩放精灵(物品)

Question

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

我的代码 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);     
};

演示：https://jsfiddle.net/01sLdpb8/6/

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

1） 门.宽度

+ （游戏.宽度/帆布.宽度）

2） 门.宽度

* （游戏.宽度/绘制表面.宽度）

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

Answer 1

1. new Image;应该new Image();

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