如何使 HTML5 Canvas 自动缩放以适合其容器？-js教程-PHP中文网

如何使 HTML5 Canvas 自动缩放以适合其容器？

Linda Hamilton

发布： 2024-11-03 16:32:30

原创

477 人浏览过

How Can I Make HTML5 Canvas Scale Automatically to Fit its Container?

增强 HTML5 Canvas：自动缩放以实现完美贴合

使用 HTML5

幸运的是，有一个巧妙的解决方案可以轻松缩放：

缩放修复

不要静态设置

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

登录后复制

此脚本确保画布始终与视口的大小匹配。

为了保持正确的定位，相对于画布更新的尺寸对齐绘图操作至关重要。

样式魔法

用 CSS 补充 JavaScript，以确保画布覆盖整个画布window:

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

登录后复制

此 CSS 可确保画布占据整个屏幕，使其完美适合任何 HTML 容器。

性能注意事项

实现此缩放事实证明，机制对性能的影响最小。但是，需要注意的是，在大幅放大的画布上绘制复杂图形会减慢渲染过程。

以上是如何使 HTML5 Canvas 自动缩放以适合其容器？的详细内容。更多信息请关注PHP中文网其他相关文章！