Question

我想知道如何在屏幕尺寸发生变化时调整画布及其所有图纸的大小。我知道这是100％可能的，因为这个游戏（调整浏览器的大小，它适合任何比例）。

http://html5games.com/Game/Smarty-Bubbles/d8f24956-dc91-4902-9096-a46cb1353b6f

每次绘制时，我是否必须使用％绘制所有形状或将它们全部乘以％？我可以欣赏必须重新绘制屏幕尺寸更改，但如何影响画布和其组件？

Answer 1

在应用程序开始时，保存开始窗口宽度和开始画布大小。

var originalWindowWidth=window.innerWidth;
var canvas=document.getElementById('canvas');
var originalCanvasWidth=canvas.width;
var originalCanvasHeight=canvas.height;

收听窗口调整大小事件

根据更改的窗口宽度计算

scale=window.innerWidth/originalWindowWidth;

如果你的画布内容是完整的＆amp;不变，你可以用CSS重新缩放你的画布。这样您就不必重绘画布内容。

4A。（选项＃1）使用CSS缩放：

// rescale both CSS width & height by the SAME SCALE FACTOR
$('#canvas').css('width',originalCanvasWidth*scale);
$('#canvas').css('width',originalCanvasWidth*scale);

如果您的画布内容不完整＆amp;不变，你应该重新缩放你的画布元素本身。这会导致所有画布内容丢失，因此您必须重绘它。您可以使用context.scale命令以新的比例因子自动重绘内容。使用这种方法也不太可能导致像素化内容与使用CSS“调整”＆amp; “挤压”现有像素以适应新的CSS大小。

4b中。（选项＃2）缩放canvas元素本身

    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");

    canvas.width=originalCanvasWidth*scale;
    canvas.height=originalCanvasHeight*scale;

    context.scale(scale,scale);

    // now reissue all the drawing commands
    // (no need to adjust coordinates or sizes -- context.scale does that for you!

调整画布图像的大小

1 个答案: