javascript - 调整 Canvas 图像的大小

Question

我想知道如何随着屏幕尺寸的变化调整 Canvas 及其所有绘图的大小。我知道这是 100% 可能的，就像这个游戏一样(调整你的浏览器大小，它将适合任何比例)。

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

我是否必须用 % 绘制所有形状，或者每次绘制它们时都将它们乘以 %？我可以理解必须在屏幕尺寸更改时重新绘制，但如何影响 Canvas 及其组件？

Answer 1

1. 在应用程序启动时，保存开始窗口宽度和开始 Canvas 大小。

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

2. 监听窗口大小调整事件

3. 计算窗口宽度变化了多少

   scale=window.innerWidth/originalWindowWidth;
   

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

4a。 (选项#1)使用 CSS 进行缩放:

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

如果您的 Canvas 内容不完整且不变，您应该重新缩放 Canvas 元素本身。这会导致所有 Canvas 内容丢失，因此您必须重新绘制它。您可以使用 context.scale 命令以新的比例因子自动重绘内容。与使用 CSS 调整大小(“拉伸(stretch)”和“挤压”现有像素以适应新的 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!