document.createElement('canvas') 总是返回 canvas 元素对象，但老版本 IE（如 IE8 及以下）不支持 canvas，其返回的元素无 getContext() 方法，调用时抛出 TypeError。
canvas 不支持时 document.createElement('canvas') 会返回什么？
它不会报错，但返回的 canvas 元素没有 getContext() 方法——调用时直接抛出 TypeError: canvas.getContext is not a function。老版本 IE（
- 别依赖
typeof HTMLCanvasElement !== 'undefined'判断，IE8 下这个类型存在但实例不可用 - 真实检测必须走实例路径：
const c = document.createElement('canvas'); const ctx = c.getContext?.('2d');，再判断ctx是否为null或undefined - 注意：
getContext('webgl')失败不等于2d也失败，二者独立检测
替代方案选型：SVG 还是 DOM + CSS？
SVG 是最常用且语义清晰的替代，但它不是万能解。关键看你要画的是什么：
- 静态图表、图标、矢量图层 → 优先用
svg：可缩放、可访问、CSS 可控、DOM 可查 - 高频重绘的动画（如粒子、实时仪表盘）→ DOM +
position: absolute+transform更稳，但 CPU 占用高、帧率难保 60fps - 纯文本/简单色块热区 → 直接用
div+background-color+clip-path，零 JS 开销 - 避免用
img标签硬塞 base64 PNG：无法响应式缩放，内存占用翻倍，且无法动态改颜色
用 SVG 模拟 canvas 常见操作的坑
SVG 和 canvas 渲染模型完全不同，直接“翻译”容易翻车：
-
canvas.clearRect()对应 SVG 是清空子元素或重置innerHTML，不是删掉整个svg标签 -
fillRect(x, y, w, h)要转成<rect x="x" y="y" width="w" height="h" fill="..."></rect>，注意坐标系原点一致（都是左上角），但 SVG 默认无抗锯齿，加shape-rendering="geometricPrecision"反而更糊 - 文字测量失效：
ctx.measureText()没有 SVG 等价物，得用getBBox()或临时创建text元素 +offsetWidth - 滤镜（blur/shadow）要用
<filter></filter>定义后通过filter属性引用，不能像 canvas 那样逐帧开关
兜底 fallback 的最小可行实现
真要兼容到 IE8，就别碰 canvas 抽象层了，写两套逻辑更可靠：
立即学习“前端免费学习笔记（深入）”；
- 加载时检测：
if (!document.createElement('canvas').getContext) { useSVG(); } else { useCanvas(); } - SVG 版本只用基础元素：
rect、circle、line、text，避开pattern、mask、foreignObject（IE9+ 才支持） - 避免在 SVG 中嵌入 JS 事件监听器，统一用事件委托到外层容器，防止 IE8 下
addEventListener缺失 - 如果项目已用
canvas库（如 Chart.js），别强行 polyfill，直接换轻量 SVG 库如svg.js或手写svg-generator工具函数
真正麻烦的从来不是画不出，而是坐标对不上、字体渲染偏移、事件坐标换算错三像素——这些细节没日志根本看不出问题。
