canvas是唯一能动态控制像素、支持实时重绘且缩放不失真的原生方案；它需js命令式绘制，非容器型标签，不解析内部html，仅一个dom节点，图形全在内存中，样式由ctx方法控制，分辨率与显示尺寸分离，需手动适配dpr。
传统 HTML 绘图（比如用 <div> + <code>position + background-color 拼像素、或靠 SVG 内联路径硬写）没法动态控制像素、不支持实时重绘、缩放易失真，而 <canvas></canvas> 是唯一能真正替代它们的原生方案。
为什么不能直接把旧 div 块换成 canvas 标签
canvas 不是“容器”，它是一块位图画布：所有绘制必须通过 JavaScript 调用 getContext('2d') 获取绘图上下文后，用命令式 API 一笔一笔画出来。直接写 HTML 结构进 canvas 标签内部（比如塞 <div> 或 <code><img alt="HTML绘图怎样改用HTML5实现_用canvas替代传统绘制法【绘图】" >）完全无效，内容会被忽略。
- 旧法依赖 DOM 节点数量撑起图形 —— canvas 只有一个 DOM 节点，图形全在内存中
- 旧法靠 CSS 控制样式 —— canvas 中颜色、线宽、透明度等都由 JS 方法参数控制，如
ctx.fillStyle = '#f00' - 旧法天然响应式困难 —— canvas 的
width/height属性是绘图分辨率，CSS 的width/height只是显示尺寸，二者不一致会导致拉伸模糊
canvas 绘制矩形/线条/文字的基本写法
替换旧页面里一堆 <div class="pixel" style="left:10px;top:20px;background:red"></div> 这类代码，核心是把“位置+颜色”转成 canvas 命令：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
<p>// 设置画布实际分辨率（重要！）
canvas.width = 800;
canvas.height = 600;</p><p>// 绘制一个红色矩形（x, y, width, height）
ctx.fillStyle = '#f00';
ctx.fillRect(10, 20, 40, 30);</p><p>// 绘制一条蓝线（起点 x/y，终点 x/y）
ctx.strokeStyle = '#00f';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(150, 100);
ctx.stroke();</p><p>// 绘制文字
ctx.font = '14px sans-serif';
ctx.fillStyle = '#333';
ctx.fillText('Hello', 200, 50);常见踩坑：clearRect 不清屏、坐标系错位、图像模糊
迁移到 canvas 后最常遇到的不是“画不出”，而是“画得不对”——多数源于对 canvas 渲染机制理解偏差：
立即学习“前端免费学习笔记（深入）”；
-
clearRect()必须显式调用才能擦除，不像 DOM 可以删节点；不清理就反复fillRect()会叠影 - canvas 坐标原点在左上角，y 轴向下增长，和数学习惯相反；缩放/平移要用
ctx.translate()或ctx.scale()，不能只改 CSS - 高 DPI 屏幕（如 MacBook Retina）下，若没做设备像素比适配，canvas 会自动缩放导致模糊：
const dpr = window.devicePixelRatio || 1; canvas.width = canvas.clientWidth * dpr; canvas.height = canvas.clientHeight * dpr; ctx.scale(dpr, dpr);
何时不该用 canvas 替代传统 HTML 绘图
canvas 适合像素级控制、动画密集、实时渲染（如游戏、图表动画、图像处理），但以下情况反而更麻烦：
- 需要 SEO 或可访问性（
<canvas></canvas>内容无法被爬虫读取，需额外加aria-label或 fallback HTML） - 图形结构复杂且需频繁 DOM 交互（比如每个小方块都要绑定 click 事件）——此时 SVG 或带
data-*属性的<div> 更合适<li>纯静态图标或简单布局 —— 直接用 CSS <code>border/clip-path或内联 SVG 更轻量
canvas 的核心价值不在“替代”，而在“释放像素控制权”。迁移前先确认你真的需要逐帧操作，而不是仅仅换个标签而已。
