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

【问题标题】：Image as the game world background, scale sprites (items)图像作为游戏世界背景，缩放精灵（项目）
【发布时间】：2018-07-25 16:27:31
【问题描述】：

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

我的代码html：

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

java脚本

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) door.width + (game.width / canvas.width)

2) door.width * (game.width/drawSurface.width)

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

【问题讨论】：

您需要的是 x 比率和 y 比率（canvasWidth / bgWidth），然后您将所有值（x、y、宽度、高度）乘以这两个图像上的比率，您就得到了. jsfiddle.net/01sLdpb8/8 不回答，因为你的代码有太多要说的......（检查你的图像是否已加载，不要像这样运行无用的 rAF 循环等）

标签： javascript canvas background scale

【解决方案1】：

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

【讨论】：