核心是让canvas物理像素匹配设备dpr并用ctx.scale对齐逻辑坐标系：先用getboundingclientrect()获css尺寸，再按dpr放大canvas.width/height，用css还原显示尺寸，最后ctx.scale(dpr,dpr)使绘图仍用逻辑像素。
在 Retina 或其他高 DPI 屏幕下让 Canvas 清晰显示，核心不是“调抗锯齿开关”，而是让画布的物理像素数量匹配设备能力，并让绘图坐标对齐逻辑像素网格。自动缩放与抗锯齿效果是适配后的自然结果，不是单独开启的功能。
正确设置 canvas 物理分辨率
浏览器默认把 canvas.width 和 canvas.height 当作 CSS 像素，但在 DPR=2 的 Retina 屏上，1 个 CSS 像素对应 4 个物理像素。若不放大画布尺寸，所有内容都会被拉伸模糊。
- 用
canvas.getBoundingClientRect()获取它当前显示的逻辑宽高（单位 px） - 读取
window.devicePixelRatio（如 2 或 3） - 设
canvas.width = 逻辑宽度 × dpr，canvas.height = 逻辑高度 × dpr - 再用 CSS 把
canvas.style.width和style.height设回原始逻辑尺寸，保持布局不变
用 ctx.scale 统一坐标系
放大 canvas 尺寸后，绘图坐标会变“密”——比如原本 fillRect(0,0,100,100) 占满一半画布，现在只占四分之一。必须重置绘图上下文的缩放关系：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 获取上下文：
const ctx = canvas.getContext('2d') - 执行
ctx.scale(dpr, dpr)，这样后续所有坐标仍按逻辑像素写（如 x=10、y=20），Canvas 内部自动映射到物理像素 - 避免手动乘 dpr 计算坐标，减少出错和维护成本
控制图像缩放质量与绘制精度
清晰 ≠ 过度平滑。抗锯齿是否启用、怎么启用，取决于用途：
- 图标、图表等需要柔边：保持
ctx.imageSmoothingEnabled = true，并设ctx.imageSmoothingQuality = 'high'（Chrome/Firefox/Edge 支持） - 缩放大幅图像（如 >3× 或
- 画 1px 线条或细边框时，将坐标四舍五入到
Math.round(x) + 0.5，强制对齐像素中心，避免亚像素渲染发灰 - 禁用不必要的
ctx.transform，尤其避免连续 scale/rotate 后未重置，误差会累积
区分像素风与抗锯齿场景
同一套 canvas 设置不能兼顾所有需求：
- 要抗锯齿效果（UI 元素、图表）：启用平滑，CSS 不加特殊声明
- 要硬边像素风（复古游戏、像素艺术）：设
ctx.imageSmoothingEnabled = false，并在 canvas 元素上加image-rendering: pixelated或-webkit-optimize-contrast - 注意：这些 CSS 属性作用对象是
<canvas></canvas>元素本身，不是里面的图片或子元素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
