什么是Canvas_如何用javascript绘制图形【教程】

Canvas需用width/height属性初始化，不可用CSS；getContext('2d')获取绘图上下文；fillRect填充、strokeRect描边，无drawRect；动画须clearRect清屏后重绘；路径绘制前必调beginPath()。

Canvas 不是现成的绘图工具，而是一块空白画布——它本身不画任何东西，所有图形都得靠 JavaScript 一帧一帧手动绘制。

Canvas 元素怎么初始化才不会白屏

常见错误是只写 标签却不设宽高，或用 CSS 拉伸尺寸，结果图形被拉糊、坐标错乱、甚至完全不显示。

• 必须通过 width 和 height 属性（不是 CSS）设置 Canvas 像素尺寸，例如：
• 获取上下文要用 getContext('2d')，返回 CanvasRenderingContext2D 对象，后续所有绘图操作都靠它
• 如果页面动态加载 Canvas，确保 DOM 加载完成后再执行 document.getElementById() 和 getContext()

drawRect / fillRect / strokeRect 区别在哪

这三个函数名看着像，但行为完全不同，混用会导致“画了却看不见”。

• drawRect(x, y, w, h) —— 不存在。这是典型误记，Canvas API 中没有这个函数
• fillRect(x, y, w, h) —— 填充一个实心矩形（默认黑色，可通过 fillStyle 改）
• strokeRect(x, y, w, h) —— 只描边，不填充；描边宽度由 lineWidth 控制，颜色由 strokeStyle 控制
• 注意：Canvas 坐标原点在左上角，x 向右增，y 向下增，和数学坐标系相反

为什么 clearRect 后图形还在闪动

这不是 clearRect 的问题，而是没做「清屏→重绘」完整循环，导致旧帧残留。

• clearRect(0, 0, canvas.width,

  

  canvas.height) 只擦除像素，不重置绘图状态（比如 fillStyle、lineWidth 等仍保留）
• 动画场景中，必须在每一帧开头调用 clearRect，再重新调用 fillRect、beginPath() 等绘制新内容
• 如果用了 save()/restore() 或变换（translate、rotate），clearRect 不会自动还原这些状态，需自行管理

路径绘制（lineTo / arc / closePath）总连不上线

Canvas 的路径是显式状态机，不调 beginPath() 就会把新图形追加到旧路径里，造成意外连接或重复描边。

• 每次画新图形前，务必先调 ctx.beginPath()，否则 lineTo() 会从上一次路径终点继续画
• moveTo(x, y) 是“抬笔移动”，不画线；lineTo(x, y) 是“落笔连线”，必须配合 beginPath() + moveTo() 才能控制起点
• closePath() 自动画一条线回到起点，但它不自动 stroke() 或 fill()，该调还得调
• 圆弧用 arc(x, y, r, startAngle, endAngle, anticlockwise)，角度单位是弧度，不是度数——别忘了 Math.PI / 180 转换

Canvas 的“简单”是假象：它不维护图形对象，不响应事件，不支持图层。一旦需要拖拽、缩放、点击判断，就得自己算坐标、存数据、做碰撞检测——这些才是实际项目中最容易卡住的地方。