Canvas是唯一能动态控制像素、支持实时重绘且缩放不失真的原生方案；它需JS命令式绘制，非容器型标签，不解析内部HTML，仅一个DOM节点，图形全在内存中，样式由ctx方法控制，分辨率与显示尺寸分离，需手动适配DPR。
传统 HTML 绘图（比如用 canvas 不是“容器”，它是一块位图画布：所有绘制必须通过 JavaScript 调用 替换旧页面里一堆 // 设置画布实际分辨率（重要！）
canvas.width = 800;
canvas.height = 600; // 绘制一个红色矩形（x, y, width, height）
ctx.fillStyle = '#f00';
ctx.fillRect(10, 20, 40, 30); // 绘制一条蓝线（起点 x/y，终点 x/y）
ctx.strokeStyle = '#00f';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(150, 100);
ctx.stroke(); // 绘制文字
ctx.font = '14px sans-serif';
ctx.fillStyle = '#333';
ctx.fillText('Hello', 200, 50); 迁移到 canvas 后最常遇到的不是“画不出”，而是“画得不对”——多数源于对 canvas 渲染机制理解偏差： 立即学习“前端免费学习笔记（深入）”； canvas 适合像素级控制、动画密集、实时渲染（如游戏、图表动画、图像处理），但以下情况反而更麻烦： canvas 的核心价值不在“替代”，而在“释放像素控制权”。迁移前先确认你真的需要逐帧操作，而不是仅仅换个标签而已。position + background-color 拼像素、或靠 SVG 内联路径硬写）没法动态控制像素、不支持实时重绘、缩放易失真，而 是唯一能真正替代它们的原生方案。为什么不能直接把旧 div 块换成 canvas 标签
getContext('2d') 获取绘图上下文后，用命令式 API 一笔一笔画出来。直接写 HTML 结构进 canvas 标签内部（比如塞
ctx.fillStyle = '#f00'
width/height 属性是绘图分辨率，CSS 的 width/height 只是显示尺寸，二者不一致会导致拉伸模糊canvas 绘制矩形/线条/文字的基本写法
这类代码，核心是把“位置+颜色”转成 canvas 命令：const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
常见踩坑：clearRect 不清屏、坐标系错位、图像模糊
clearRect() 必须显式调用才能擦除，不像 DOM 可以删节点；不清理就反复 fillRect() 会叠影ctx.translate() 或 ctx.scale()，不能只改 CSSconst dpr = window.devicePixelRatio || 1;
canvas.width = canvas.clientWidth * dpr;
canvas.height = canvas.clientHeight * dpr;
ctx.scale(dpr, dpr);
何时不该用 canvas 替代传统 HTML 绘图
内容无法被爬虫读取，需额外加 aria-label 或 fallback HTML）data-* 属性的 border / clip-path 或内联 SVG 更轻量
