Canvas默认无边框、无背景、无内容，仅预留透明区域；需通过JS获取上下文绘图，且width/height须设为HTML属性而非仅CSS，否则易拉伸或渲染失败。
Canvas 不是“放进去就能画”的元素，它本质是一块空白位图，必须通过 JavaScript 获取绘图上下文后才能操作像素 —— 直接写 HTML 不会出任何图形。
为什么 <canvas> 标签写了却看不到内容
因为 <canvas> 默认无边框、无背景、无默认内容。浏览器只预留一块透明区域，不主动渲染任何东西。
常见错误现象：
- 画布区域一片空白，连边框都没有
- 用 CSS 设置
width/height后图形被拉伸变形 - JS 执行前就调用
getContext('2d')，返回null
正确做法：
立即学习“前端免费学习笔记（深入）”；
-
width和height必须写在 HTML 标签属性里（如<canvas width="400" height="300"></canvas>），不能只靠 CSS - 确保 JS 在 DOM 加载完成后执行，比如放在
</body>前，或用DOMContentLoaded事件 - 加 fallback 文字：
<canvas>您的浏览器不支持 canvas</canvas>，方便低版本 IE 用户感知
getContext('2d') 返回 null 怎么办
这是最常卡住新手的第一步。不是语法错，而是执行时机或环境不对。
使用场景：
- 元素未加载完成就查 DOM（
document.getElementById返回null） - 浏览器根本不支持 canvas（IE8 及更早）
- 传了错误的上下文类型，比如写成
'2D'（大小写敏感）或'webgl'但没做兼容判断
实操建议：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 先确认元素存在：
const canvas = document.getElementById('myCanvas'); if (!canvas) console.error('canvas not found'); - 再检查支持性：
if (!canvas.getContext) { /* 提示不支持 */ } - 严格用小写：
canvas.getContext('2d')，别写'2D'或'2d '（尾部空格也会失败）
画矩形为什么只有边框没有填充，或反过来
Canvas 的矩形绘制分三类独立 API，不共享样式状态 —— fillRect 只管填充，strokeRect 只管描边，clearRect 只管擦除。它们互不影响。
参数差异：
-
fillRect(x, y, width, height)：按fillStyle填充，不依赖路径 -
strokeRect(x, y, width, height)：按strokeStyle和lineWidth描边，也不依赖路径 - 如果想用路径方式画（比如后续要加圆角、裁剪），得用
beginPath()+rect()+fill()或stroke()
容易踩的坑：
- 设了
fillStyle却调用strokeRect，结果什么也没显示（因为描边色还是默认黑，但lineWidth是 1，太细看不见） - 调用
fillRect前没设fillStyle，用的是默认黑色，但在深色背景上不易察觉 - 坐标
(x, y)是矩形左上角，不是中心点 —— 这和 CSS 的transform-origin习惯相反
画圆/弧线总缺一块或画歪了
arc() 的角度单位是弧度，不是度数，这是绝大多数初学者栽跟头的地方。
关键参数含义：
arc(x, y, radius, startAngle, endAngle, anticlockwise?)-
startAngle和endAngle从正 X 轴开始逆时针计量 - 整圆是
0到Math.PI * 2，不是0到360 - 漏掉
beginPath()会导致新弧线和上一条路径连起来，出现意外连线
快速换算技巧：
- 90° →
Math.PI / 2 - 180° →
Math.PI - 360° →
Math.PI * 2 - 顺时针画？把
anticlockwise设为false（默认是false，但显式写出来更安全）
示例（画一个完整红圈）：
ctx.beginPath(); ctx.arc(150, 100, 40, 0, Math.PI * 2); ctx.strokeStyle = 'red'; ctx.stroke();
真正麻烦的从来不是 API 记不住，而是坐标系、单位、执行顺序、样式作用域这四点混在一起时，改一处，三处跟着错 —— 动手前先确认 canvas 尺寸、上下文获取、路径起始这三个环节全通了，再碰图形才不晕。
