canvas字体大小适配

在 Canvas 中，可以通过设置字体的大小来适配不同的屏幕尺寸。以下是一些方法：

1. 使用相对单位：可以使用相对单位，如 em、rem 或 vw/vh 来设置字体大小，这样可以根据屏幕尺寸调整字体大小。例如：

ctx.font = "2em Arial";
ctx.fillText("Hello World", x, y);

2. 根据屏幕分辨率调整：可以根据屏幕的分辨率来调整字体大小，例如：

var dpi = window.devicePixelRatio;
ctx.font = (16 * dpi) + "px Arial";
ctx.fillText("Hello World", x, y);

3. 使用媒体查询：可以使用 CSS3 媒体查询来根据屏幕尺寸设置字体大小，例如：

@media screen and (max-width: 767px) {
  canvas {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  canvas {
    font-size: 16px;
  }
}

@media screen and (min-width: 992px) {
  canvas {
    font-size: 20px;
  }
}

以上是几种常见的方法，可以根据具体的需求选择合适的方式来适配字体大小。