<canvas>是HTML5新增的原生绘图元素，本身不绘图，需JavaScript调用getContext('2d')获取上下文并使用fillRect()等方法操作像素；HTML4无此标签及原生绘图API，无法原生画图形。
<canvas> 是 HTML5 新增的原生绘图元素，它本身不画任何东西，只是一个固定尺寸的位图“画布”容器；真正绘图必须靠 JavaScript 调用 getContext('2d') 获取 2D 渲染上下文，再用 fillRect()、strokeLine() 等方法操作像素。
HTML4 完全不能原生画图形——没有 <canvas> 标签，也没有浏览器内置的 JS 绘图 API。开发者只能靠模拟手段“曲线救国”，比如：
- 用大量
<div>+border拼三角形（性能差、不可缩放） - 借助 Flash 或插件（已淘汰）
- 引入 SVG（但 SVG 是 XML 描述，不是 HTML4 原生能力，且需额外 namespace 支持）
所以，“HTML4 能不能画图形”的答案很明确：不能原生支持，也不具备 canvas 那种逐像素控制能力。
为什么 canvas 必须搭配 JavaScript 才能工作
canvas 元素在 DOM 中只是一个空壳：
<canvas id="myCanvas" width="400" height="300"></canvas>它不渲染内容，也不响应绘图指令。只有执行以下三步，图像才会出现：
- 用
document.getElementById()拿到 canvas 元素 - 调用
getContext('2d')获取绘图对象（返回CanvasRenderingContext2D实例） - 调用
fillStyle、beginPath()、stroke()等方法真正下笔
立即学习“前端免费学习笔记（深入）”；
width/height 属性 vs CSS 宽高：一个必踩的坑
这是新手最常翻车的地方：
- 写在 HTML 标签里的
width和height属性，同时决定「画布像素尺寸」和「显示尺寸」 - 用 CSS（比如
style="width:400px;height:300px;"）只改变「显示尺寸」，而画布像素尺寸仍为默认的 300×150 - 结果：图形被强行拉伸、模糊、线条变粗，坐标系也错乱
<canvas id="myCanvas" width="400" height="300">你的浏览器不支持 canvas</canvas>如果需要响应式，应在 JS 中监听窗口变化，动态重设
canvas.width 和 canvas.height，再重绘。IE8 及更早版本不支持 canvas，但 fallback 很简单
IE9+、Firefox 1.5+、Chrome、Safari、Opera 9+ 都支持 <canvas>。对老 IE，只需把替代内容写在标签内部：
<canvas id="myCanvas" width="400" height="300"> <p>您的浏览器太旧，不支持 Canvas，请升级或换用 Chrome/Firefox</p> <img src="fallback.png" alt="示意图"> </canvas>注意：
- 替代内容必须放在
<canvas>开始与结束标签之间 - 不写结束标签
</canvas>，整个页面后续内容都会被当成 fallback 显示 - 现代项目通常不再兼容 IE8，但 fallback 逻辑依然值得保留以防 CDN 或 JS 加载失败
Canvas 的本质是“位图 API”，不是“图形 DOM”。它的强大来自直接控制像素和帧率，代价是所有状态（颜色、线宽、变换）都要手动维护。一旦你开始用 save()/restore()、transform() 或离屏 canvas，就真正踏入了性能与精度的深水区——那里没有自动重排，也没有事件冒泡，只有你和那一片 300×150（或你设的任何值）的像素格子。
