fillrect不生效主因是未获取2d上下文或canvas尺寸为0；css宽高会拉伸而非扩大绘图区，须用js设置width/height属性；坐标原点在左上角，负值使图形移出可视区。
canvas 绘制矩形时 fillRect 不生效？检查上下文和坐标系
直接调用 fillRect 却看不到图形，大概率是没获取到 2D 渲染上下文，或者 canvas 尺寸为 0。canvas 元素默认宽高是 300×150 像素，但若 CSS 设置了 width/height，会拉伸画布而非扩大绘图区域——这是最常被忽略的陷阱。
- 必须先用
getContext('2d')获取上下文，否则所有绘图方法都无效 - 用 JS 设置 canvas 的
width和height属性（不是 CSS），才能真正扩大绘图缓冲区 - 坐标原点在左上角，x 向右增，y 向下增；负坐标会把图形画出可视区域
- 示例：
const canvas = document.getElementById('myCanvas');<br>canvas.width = 400;<br>canvas.height = 300;<br>const ctx = canvas.getContext('2d');<br>ctx.fillStyle = '#369';<br>ctx.fillRect(50, 30, 120, 80);
画圆要用 arc 而不是 circle 标签，参数顺序容易记混
HTML 没有 <circle></circle> 这种 canvas 子标签，所有矢量图形都靠 arc 或路径 API 绘制。arc 的前三个参数是圆心 x、y 和半径，后三个是起始弧度、终止弧度、是否逆时针——初学者常把弧度写成角度，或把起始/终止顺序搞反。
- JavaScript 中三角函数用的是弧度，不是角度：30° 要写成
Math.PI / 6 - 完整画实心圆需配合
beginPath()、arc()、fill()三步，漏掉beginPath()可能复用上一个路径导致意外连线 - 画空心圆用
stroke()替代fill()，并设置ctx.lineWidth - 示例（实心圆）：
ctx.beginPath();<br>ctx.arc(200, 150, 40, 0, Math.PI * 2);<br>ctx.fillStyle = 'orange';<br>ctx.fill();
绘制三角形得靠 moveTo + lineTo + closePath，别指望有现成函数
canvas API 没有 drawTriangle 这样的快捷方法，必须手动构建路径。常见错误是只连两条边就调用 fill()，结果画出的是不闭合的线段，填充区域为空。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须调用
closePath()才能自动补最后一条边，否则要手动lineTo()回起点 -
fill()会自动闭合路径并填充；stroke()则只描边，不自动闭合 - 注意
fillStyle和strokeStyle是两个独立属性，填色和描边颜色可不同 - 示例（等边三角形）：
ctx.beginPath();<br>ctx.moveTo(100, 200);<br>ctx.lineTo(150, 120);<br>ctx.lineTo(200, 200);<br>ctx.closePath();<br>ctx.fillStyle = '#6c757d';<br>ctx.fill();
图形叠加时 z-index 不起作用，靠绘制顺序控制层叠
canvas 是位图绘制，没有 DOM 那样的层级概念。所谓“上面”“下面”，完全取决于代码中 fill() 或 stroke() 的调用先后——后画的覆盖先画的。想让某个图形“置顶”，就得把它对应的绘图代码放在最后。
- 无法用 CSS
z-index控制 canvas 内部元素顺序 - 如果图形需要交互（比如点击某一块），得自己用坐标计算判断落点，canvas 本身不提供事件委托
- 频繁重绘时，清屏用
clearRect(0, 0, canvas.width, canvas.height)，不要删 canvas 再重建，否则丢失上下文状态 - 性能敏感场景下，避免在动画循环里重复调用
beginPath()和样式设置，可提前配置好
实际动手时，最容易卡住的不是语法，而是坐标系理解偏差、上下文缺失、以及把 canvas 当成 SVG 来用。画布一旦清空，所有内容就没了——它不保存对象，只存像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
