html5绘图原生依赖标签和javascript api，核心是通过getcontext('2d')获取canvasrenderingcontext2d上下文进行立即模式绘图，不依赖外部工具。
HTML5 绘图靠 <canvas></canvas> 元素和 JavaScript API
不是靠外部工具，HTML5 原生就支持绘图——核心是 <canvas></canvas> 标签配合 JavaScript 的 2D（或 WebGL）绘图上下文。浏览器内置了 CanvasRenderingContext2D 接口，所有绘图操作（画线、填充、变换、文字等）都通过调用它的方法完成。
常见误区是把 <canvas></canvas> 当成“图片容器”，其实它是一块空白位图画布，内容完全由 JS 动态生成，不保留绘制对象的 DOM 结构（即“立即模式”绘图）。
getContext('2d') 是绘图能力的开关
没有这一步，<canvas></canvas> 就只是个空盒子。必须显式获取上下文实例，才能调用绘图方法：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 必须指定 '2d' 或 'webgl'
ctx.fillStyle = '#ff6b6b';
ctx.fillRect(10, 10, 100, 80); // 真正的绘图开始于此
注意：getContext() 返回 null 的常见原因包括：
立即学习“前端免费学习笔记（深入）”；
-
<canvas></canvas>元素尚未加载完成（JS 执行早于 DOM） - 重复调用
getContext('2d')获取不同上下文（如再要webgl）会失败 - Canvas 尺寸为 0 × 0（未设
width/height属性或 CSS 拉伸导致像素比异常）
Canvas 不是 SVG：没有 DOM 节点、不响应式、需手动重绘
这是最容易被忽略的底层差异：
-
<canvas></canvas>内容是像素集合，不能用 CSS 选中某条线或某个圆 - 缩放画布时若只改 CSS 宽高，图像会模糊（必须同步修改
canvas.width/canvas.height属性） - 动画或交互中，每次变化都要清空画布（
clearRect()）再重绘全部内容 - 无内置事件绑定到图形上（比如“点击圆形”需自己算坐标+几何判断）
如果需要矢量图形、可访问性、CSS 控制或复杂交互，<svg></svg> 更合适；但要做游戏、数据可视化渲染、图像处理，<canvas></canvas> 是更直接的选择。
不需要外部库也能做基础绘图，但复杂场景建议封装或用成熟方案
原生 API 足够画线、弧、贝塞尔曲线、渐变、阴影、图像合成，甚至简单滤镜（ctx.getImageData() + 操作像素）。但以下情况容易踩坑：
- 高 DPI 屏幕下未适配设备像素比（
window.devicePixelRatio），导致模糊 - 频繁创建/销毁
Image对象引发内存泄漏 - 未使用
requestAnimationFrame做动画，造成掉帧或卡顿 - 大量路径绘制时未用
beginPath()/closePath()隔离，导致意外连接
真正需要“外部工具”的，其实是开发效率和功能扩展：比如 paper.js 提供面向对象的图形模型，Chart.js 封装了数据到视觉的映射，three.js 抽象了 WebGL 复杂度——它们仍运行在 <canvas></canvas> 之上，不是替代，而是增强。
