css canvas

要实现CSS Canvas的自适应，可以按照以下步骤进行操作：

1. 首先，在HTML文档中创建一个Canvas元素，并为其指定一个id或类名，以便在CSS中进行选择。

<canvas id="myCanvas"></canvas>

2. 在CSS中选择Canvas元素，并设置其宽度和高度为相对值，例如使用百分比或viewport单位。

#myCanvas {
  width: 100%;
  height: 100vh;
}

这将使Canvas元素的宽度和高度与其父元素相等，并且会根据浏览器窗口的大小进行自适应调整。

3. 接下来，在JavaScript中获取Canvas元素的引用，并设置其实际的宽度和高度，以使其与CSS样式匹配。

const canvas = document.getElementById('myCanvas');
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

通过将Canvas的实际宽度和高度设置为与CSS样式匹配，可以避免画布在缩放时出现模糊或拉伸的问题。

4. 最后，使用Canvas API进行绘图时，确保将坐标和尺寸等值设置为相对于Canvas的实际宽度和高度，而不是固定值。

const ctx = canvas.getContext('2d');

// 绘制一个矩形
ctx.fillRect(0, 0, canvas.width, canvas.height);

这样，Canvas就会根据浏览器窗口的大小进行自适应，并且绘制的内容也会按比例缩放。