Javascript 调整画布图像大小

我想知道如何随着屏幕大小的变化调整画布及其所有图形的大小。我知道这是100%的可能，因为这个游戏（调整您的浏览器，它将适合任何比例）

每次绘制形状时，我必须用%来绘制所有形状还是用%来乘以它们？我很感激在屏幕大小改变时必须重新绘制，但我如何影响画布及其组件

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

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

侦听窗口调整大小事件

根据更改的窗口宽度计算

scale=window.innerWidth/originalWindowWidth;

如果画布内容完整且不变，则可以使用CSS重新缩放画布。这样，您就不必重新绘制画布内容

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

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

如果画布内容不完整且不变，则应重新缩放画布元素本身。这会导致所有画布内容丢失，因此必须重新绘制。您可以使用

context.scale

命令以新的比例因子自动重画内容。与使用CSS“拉伸”和“挤压”现有像素以适应新CSS大小相比，使用此方法也不太可能产生像素化内容

4b。（选项2）缩放画布元素本身

    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!

---

但是里面的东西呢？如果画一个10x10的正方形，然后将窗口大小增加100%，我的正方形会是20x20吗？如果我需要再画一个10x10的正方形怎么办？我希望它能根据新的浏览器尺寸自动放大。它必须知道它在绘制之前的窗口大小，是吗？现在，我有这个工作，我怎么能画一个矩形在屏幕中间，总是占据相同大小的屏幕？我是否总是需要乘以%或以默认比例为基础？您有几个选项：（1）不执行context.scale，这意味着fillrect（x，y，10，10）将绘制一个可视为10x10的rect。（2） 执行

context.scale

，这会导致所有新图形按提供的比例因子放大/缩小，而fillrect（x，y，10,10）将产生视觉上为20x20的rect。如果您想要一个10x10的正方形，那么fillRect（x，y，10/比例，10/比例）。这两个选项同样适用于x、y坐标。您最初的问题是“我希望它能自动升级到新的浏览器大小”，所以我添加了context.scale。如果您不需要它，您可以将其关闭并正常绘制；-）谢谢我所做的是创建一个名为mycordx/mycordy的函数，它们从0-1（基本上是a%）中获取一个输入值，然后将其乘以窗口的宽度或高度。它工作得很完美，但要把每个值都放进去有点烦人。如果你觉得重复的

*scale

很烦人，你可以相当快地包装上下文绘图命令来自动调整比例：

函数myFillRect（x，y，w，h）{fillRect（x*scale，y*scale，width*scale，height*scale）；}