如何使用 JavaScript 和 CSS 动态调整 Canvas 元素的大小以适应窗口尺寸？

使用 JavaScript 和 CSS 动态调整画布大小以适应窗口尺寸

使用 HTML5 画布元素时，自动缩放可能具有挑战性它们的尺寸适合可用的窗户空间。虽然 CSS 可用于将 div 等 HTML 元素缩放到 100%，但它对 canvas 元素没有相同的效果。

但是，有一个简单而有效的解决方案可以解决此问题。通过利用 JavaScript 和 CSS，我们可以动态调整画布大小以匹配窗口尺寸。

JavaScript 实现：

JavaScript 代码涉及操作画布的宽度和基于当前窗口大小的高度属性。这可确保画布适应窗口大小的变化，而无需手动调整大小。

<code class="javascript">function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}</code>

CSS 响应式：

确保画布元素填充可用空间并适当定位，我们使用 CSS 来配置 html 和 body

<code class="css">html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}</code>

该解决方案已被证明可以有效地保持响应能力，而不会显着降低性能。它可以优雅地处理大小调整，并确保画布元素始终处于窗口内的最佳位置，从而轻松创建动态和自适应 Web 应用程序。

以上是如何使用 JavaScript 和 CSS 动态调整 Canvas 元素的大小以适应窗口尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！