JavaScript绘制Canvas图形教程

本文深入浅出地讲解了JavaScript操作Canvas绘制图形的核心流程与关键细节：从获取有效的2D渲染上下文、确保DOM加载完成，到绘制矩形与复杂路径（如圆、多边形）的规范步骤，再到样式设置、状态管理及常见陷阱规避——每一步都直击实战痛点，帮你避开“绘图不显示”“样式失效”“路径意外连接”等高频问题，真正掌握Canvas绘图的底层逻辑与可靠实践。

JavaScript 通过获取 Canvas 元素的 2D 渲染上下文（getContext('2d')）来实现交互，所有绘图操作都基于这个上下文对象进行。

获取 Canvas 上下文

必须先拿到 元素，再调用 getContext('2d') 才能开始绘图。若忽略这一步，后续所有绘图方法都会无效。

• 确保 DOM 已加载完成，推荐在 DOMContentLoaded 或 window.onload 中操作
• 检查返回值是否为 null，避免因浏览器不支持或参数错误导致静默失败
• 示例：const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

绘制矩形

Canvas 提供三种矩形方法：填充、描边、清除。它们都接受 x, y, width, height 四个参数。

• ctx.fillRect(x, y, w, h)：实心矩形，受 fillStyle 影响
• ctx.strokeRect(x, y, w, h)：空心矩形，受 strokeStyle 和 lineWidth 影响
• ctx.clearRect(x, y, w, h)：擦除指定区域（注意不是设为透明，而是恢复为初始空白）

绘制路径类图形（线段、圆、多边形）

这类图形需按“开始路径 → 构建路径 → 绘制”三步走，否则不会显示。

• 用 ctx.beginPath() 开启新路径，避免意外连接上一次的终点
• 用 moveTo() 定起点，lineTo() 连线段，arc() 画圆弧，closePath() 自动闭合
• 最后调用 fill() 或 stroke() 渲染（可单独调用，也可两者都调）
• 示例画圆：ctx.beginPath();
  ctx.arc(100, 100, 30, 0, Math.PI * 2);
  ctx.fill();

设置样式与状态

颜色、线条、阴影等样式需在绘制前设置，且会持续影响后续绘图，直到被重新赋值。

• ctx.fillStyle = '#ff6b6b' 或 'rgb(255,107,107)' 或 'transparent'
• ctx.strokeStyle = 'blue'; ctx.lineWidth = 2;
• ctx.shadowColor = 'rgba(0,0,0,0.3)'; ctx.shadowBlur = 5;（开启阴影）
• 用 ctx.save() 和 ctx.restore() 保存/恢复整个绘图状态（含变换、裁剪、样式）

好了，本文到此结束，带大家了解了《JavaScript绘制Canvas图形教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！