Question

我发现这个非常棒的博客帖子解释了如何调整画布大小以适应任何屏幕http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/我实现了它并且它正在完美地调整它但是我遇到这个问题，当画布是画布时我的对象出现在屏幕外太少了。

例如，对于我的游戏，我定义了一个尺寸宽度为480，高度为1024的世界，如果我将一个元素放在x轴上大约400但是当前使用的显示是360px宽，那么画布将具有正确的宽度比例到高度0.46875但该对象将不可见。

为了解决这个问题，我想我需要定义绝对世界尺寸和屏幕尺寸之间的比率，然后乘以我计算物体位置时的比例，但我的问题是 - 画布有没有办法自动这样做？

Answer 1

画布本身和画布元素都有宽度和高度。如果它们不相同，则会自动缩放画布的内容以适合该元素。所以，是的，您可以将画布定义为您想要的大小，并定义元素以使其缩放。当然，所有都会缩放，如果宽高比不同，你的形状会变形。

例如：这是一个300x300的画布，在画布元素中只有150x300。当我在其中绘制圆圈时，您可以看到缩放：

＆＃13;

var canvas = document.getElementById("clock");
var context = canvas.getContext("2d");

document.getElementById("status").innerHTML = canvas.height;
console.log(canvas.height);
var ctx = canvas.getContext('2d');

var path = new Path2D();
path.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.fillStyle = ctx.strokeStyle = "blue";
ctx.fill(path);

＆＃13;

canvas#clock {
  width: 300px;
  height: 300px;
  border: #D50003 1px solid;
  background: #1E1E1E;
}

＆＃13;

<canvas id="clock"></canvas>
<div id="status"></div>

＆＃13;

画布的尺寸

1 个答案: