如何使 HTML5 Canvas 元素适合整个窗口？

调整画布大小以适合窗口

问题：

虽然您可以轻松地缩放

通过将元素的高度和宽度设置为 100% 来适应可用空间，缩放 HTML5

解决方案：

要优雅地解决此问题并确保画布元素符合窗口的尺寸，请考虑以下方法：

JavaScript：

/* Essential for aligning elements relative to the canvas' current proportions. */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

CSS：

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}

实现细节：

• JavaScript 函数动态设置画布元素的宽度和高度属性以匹配窗口的尺寸。
• CSS 规则删除 周围的任何边距或填充。和<主体>元素，让画布完全展开。

该解决方案已被证明具有高性能且视觉效果令人满意，使您的画布元素能够无缝适应周围环境。

以上是如何使 HTML5 Canvas 元素适合整个窗口？的详细内容。更多信息请关注PHP中文网其他相关文章！