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

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

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

1） 由于我每次使用requestAnimationFrame，执行此调整是否需要更多时间

2） 是否有一种方法可以一次性调整我的图像大小，将其保存到var中并使用它来节省时间

不管怎样，我希望有一种方法将调整大小的图像保存到一个变量中，以便将其放入canvas的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);

---

您可以将图像保存到画布，然后将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

，它将是您最初绘制的任何大小。在调整大小和不调整大小之间，您可能看不到多少性能提升，尽管您应该确定它的基准

---

另外，您不应该每个帧都调整大小，您可以监听窗口调整事件，并在该事件触发时调整大小。

好的，那么1）为什么您认为没有任何性能差异？2） 我不认为实际制作40张画布（我有很多图片需要调整大小）然后在每一张画布上绘制是最佳的。。。是吗？（我可能会将其用于我的createPattern方法）“你也不应该每个帧都调整大小，你可以监听窗口调整大小事件，并在该事件触发时调整大小。”你在这里的意思是什么？我必须在每个requestAnimationFrame中调整它的大小，因为原始图像比画布上实际绘制的图像大/小。我希望我的游戏角色与画布的尺寸成比例，因为它们是动态的。1）好的，所以我测量了性能差异，不调整大小要快2%。2） 它将使用更多的内存，但除非您使用的是巨大的图像，否则不会有太大的性能差异。谢谢您的评论。一个请求，你能回答我的第二条评论吗？关于我的最后一条评论，我的意思是，如果你将缩放大小与窗口大小联系起来，你只需要在调整窗口大小时缩放它们一次（如果你使用多画布方法）。如果要从原始图像中绘制它们，是的，您需要在每一帧调整它们的大小，这是正确的。

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