画布 - 调整图像大小并保存到变量

Question

所以，我有一个浏览器游戏，它由具有动态尺寸（它缩放到用户窗口的尺寸）的画布运行，它获取各种尺寸的图像，根据用户的窗口尺寸缩放它们并绘制它们： （我的调整大小算法示例：）

https://jsfiddle.net/8o3sn9mh/55/

var
canvas = document.getElementById('c'),
ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var flower = new Image();
//the src is actually local, but i put a url for example's sake
flower.src = "http://plainicon.com/dboard/userprod/2803_dd580/prod_thumb/plainicon.com-46129-128px-af2.png"
flower.onload = function(){
ctx.drawImage(flower,0,0,128,128, 0, 0, window.innerWidth / 2, window.innerHeight / 2);
}

如您所见，我正在绘制一个 128x128px 的图像，并将其调整为用户窗口的一半。所以，我在想 - 我的游戏可能会在每次渲染执行时执行此操作，并且每次执行它可能需要不必要的调整大小时间。所以：

1) 由于我每个 requestAnimationFrame 都使用它，因此执行此调整大小是否需要更多时间？

2) 有没有办法一次调整我的图像大小，将其保存到 var 中并使用它来节省时间？

无论如何，我想要一种方法将调整大小的图像保存到 var 中，以便将其放入画布的 createPattern 方法中：

pattern = ctx.createPattern(resizedFlower, 'repeat');  //resizedFlower should be the original flower resized into half's the user's window's width + height
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 50, 50);

Answer 1

您可以将图像保存到画布上，然后在该画布上使用 drawImage。例如：

var canvas = document.getElementById('c'),
ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var flowerCanvas = document.createElement('canvas');
flowerCanvas.width = window.innerWidth;
flowerCanvas.height = window.innerHeight;
flowerCtx = flowerCanvas.getContext('2d');

var flower = new Image();
//the src is actually local, but i put a url for example's sake
flower.src = "http://plainicon.com/dboard/userprod/2803_dd580/prod_thumb/plainicon.com-46129-128px-af2.png"
flower.onload = function(){
    flowerCtx.drawImage(flower,0,0,128,128, 0, 0, window.innerWidth / 2, window.innerHeight / 2);
    ctx.drawImage(flowerCanvas,0,0);
}

现在您可以重复使用flowerCanvas，它将是您最初绘制的任何大小。您可能不会看到调整大小与不调整大小之间有太多的性能提升，尽管您应该确定它的基准。

此外，您不应该每帧都调整所有内容的大小，您可以监听窗口调整大小事件，并在该事件触发时调整大小。