canvas 画布自适应

canvas 画布自适应可以通过 CSS 属性和 JavaScript 实现。

1. CSS 属性

可以通过 CSS 的 width 和 height 属性实现画布自适应。首先，需要将 canvas 标签的宽高设置为百分比，如下所示：

canvas {
  width: 100%;
  height: 100%;
}

然后，在 JavaScript 中获取 canvas 元素，并设置其宽高为父元素的宽高，如下所示：

const canvas = document.querySelector('canvas');
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;

这样，当父元素的宽高发生变化时，canvas 画布的宽高也会随之改变。

2. JavaScript 实现

可以通过监听窗口大小的变化来实现画布自适应。首先，在 JavaScript 中获取 canvas 元素，并设置其宽高为窗口的宽高，如下所示：

const canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

然后，添加窗口大小变化的监听事件，并在事件处理函数中重新设置 canvas 的宽高，如下所示：

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

这样，当窗口的宽高发生变化时，canvas 画布的宽高也会随之改变