调整 canvas 张图片的大小

Question

我想知道如何在屏幕尺寸发生变化时调整 canvas 及其所有绘图的大小。我知道这个游戏有 100% 的可能性（调整你的浏览器大小，它会适合任何比例）。

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

我是否必须在每次绘制时都用 % 绘制所有形状或将它们全部乘以 %？我很欣赏必须在屏幕尺寸更改时重绘，但我如何影响 canvas 和它的组件？

Answer 1

在应用程序启动时，保存开头 window 宽度和开头 canvas 大小。

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

侦听 window 调整大小事件

根据window宽度改变多少来计算

scale=window.innerWidth/originalWindowWidth;

如果您的 canvas 内容完整且不变，您可以将 canvas 重新调整为 CSS。这样您就不必重新绘制 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 调整大小相比，"stretches" 和 "squeezes" 现有像素适合新的 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!

调整 canvas 张图片的大小

Resize canvas images

html

javascript

canvas