Canvas

Question

所以，我有一个浏览器游戏，它是运行的 canvas 具有动态尺寸（它缩放到用户的 window 的尺寸），它可以拍摄各种尺寸的图像，根据用户的 window 尺寸缩放它们并绘制它们：（我的调整算法示例：）

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

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

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

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

无论如何，我想要一种将调整后的图像保存到 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);

Answer 1

您可以将图像保存到 canvas，然后将 drawImage 与 canvas 一起使用。例如：

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，它会是您最初绘制时的任何大小。您可能不会在调整大小与不调整大小之间看到太多性能提升，尽管您应该对其进行基准测试以确保。

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

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

Canvas - resize image and save to a variable

javascript

resize