canvas 移动端适配

Canvas 是 HTML5 中的一个重要元素，用于在网页上绘制图形、动画和交互式内容。在移动端适配中，确保 Canvas 的内容在不同设备上都能正确显示和交互是关键。以下是一些移动端适配 Canvas 的策略：

1. **响应式设计**：使用 CSS 媒体查询（Media Queries）调整 canvas 的大小，使其根据屏幕尺寸自动缩放。比如，你可以设置 canvas 的宽度为视口宽度的百分比。

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

2. **视口单位（viewport units, vpx/vh）**：使用 `vw` 和 `vh` 单位来设置 canvas 的尺寸，这样可以保持在不同分辨率下的相对比例。

3. **触摸事件处理**：针对触摸操作进行优化，使用 `touchstart`, `touchmove`, 和 `touchend` 事件代替鼠标事件。确保触摸操作能正确识别并绘制到 canvas 上。

4. **设备像素比（DPR, Device Pixel Ratio）**：考虑到 Retina 屏幕等高密度设备，确保 canvas 的画布元素不被放大，可以通过 CSS 设置其内联样式，如 `transform: scale(1 / window.devicePixelRatio)`。

5. **使用CSS transform**：对于复杂的图形或动画，使用 `transform` 变换可以实现 canvas 内容的平移、旋转和缩放，同时保持清晰度。

6. **渐进增强和优雅降级**：对支持 canvas 的现代设备提供高性能体验，同时对不支持 canvas 的旧设备提供基本的图形或消息提示。