Question

所以，我有一个浏览器游戏，它由具有动态尺寸的画布运行（它可以缩放到用户的窗口尺寸），可以拍摄各种尺寸的图像，根据用户进行缩放＆＃ 39; s窗口尺寸并绘制它们：（我的调整算法的例子：）

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像素的图像，并将其调整为用户窗口的一半。所以，我在想 - 我的游戏可能会在每次渲染执行时执行此操作，并且每次执行它可能需要不必要的调整时间。所以：

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

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

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

1 个答案: