canvas 画布内容自适应

要使画布内容自适应，您需要设置画布的宽度和高度属性为视口的宽度和高度。然后，在调用绘图函数之前，您需要检查视口的大小，并根据需要重新计算图形的尺寸和位置。您还可以使用canvas的缩放功能来调整绘图内容以适应视口大小。

例如，以下代码将canvas的宽度和高度设置为视口大小，然后在绘制之前重新计算图形的尺寸和位置：

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

// 设置画布的宽度和高度为视口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function draw() {
  // 获取视口的宽度和高度
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  // 计算图形的尺寸和位置
  const shapeWidth = viewportWidth * 0.8;
  const shapeHeight = viewportHeight * 0.8;
  const shapeX = (viewportWidth - shapeWidth) / 2;
  const shapeY = (viewportHeight - shapeHeight) / 2;

  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制图形
  ctx.fillRect(shapeX, shapeY, shapeWidth, shapeHeight);
}

// 在窗口大小改变时重新绘制
window.addEventListener('resize', draw);

// 初始绘制
draw();

在上面的代码中，我们在绘制函数中计算图形的尺寸和位置，然后使用ctx.fillRect()方法绘制一个矩形。我们还在窗口大小改变时重新绘制图形。这确保我们的画布内容始终与视口大小相匹配。

您还可以使用canvas的缩放功能来调整绘图内容以适应视口大小。例如，以下代码将画布缩放为视口大小：

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

// 设置画布的宽度和高度为视口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 缩放画布以适应视口大小
ctx.scale(window.innerWidth / canvas.width, window.innerHeight / canvas.height);

function draw() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制图形
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

// 在窗口大小改变时重新绘制
window.addEventListener('resize', () => {
  // 更新画布的宽度和高度
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // 缩放画布以适应视口大小
  ctx.scale(window.innerWidth / canvas.width, window.innerHeight / canvas.height);

  // 重新绘制
  draw();
});

// 初始绘制
draw();

在上面的代码中，我们使用ctx.scale()方法将画布缩放为视口大小。我们还在窗口大小改变时重新计算画布的宽度和高度，并缩放画布以适应新的视口大小。这确保我们的画布内容始终与视口大小相匹配