Canvas绘图技巧与API使用全解析

本文深入浅出地讲解了HTML5 Canvas的2D绘图核心机制，强调其“命令式路径绘制”本质——并非直接创建图形对象，而是通过获取2D渲染上下文（ctx）后，调用fillRect、strokeRect等快捷方法或beginPath、moveTo、arc等路径API来构建并渲染图形；同时系统梳理了样式设置（如fillStyle、lineWidth、globalAlpha）与状态管理（save/restore）的关键技巧，辅以清晰示例揭示初学者易踩的坑（如遗漏beginPath导致路径累积、未隔离样式引发污染），帮助开发者真正掌握Canvas高效、可控的绘图逻辑。

Canvas 绘图靠的是 2D 渲染上下文（2D context），不是直接画图形，而是通过调用一系列方法，在内存中“描边”或“填充”路径，最终显示在页面上。核心是先获取上下文，再用命令式 API 操作。

获取绘图上下文

必须先拿到 2d 上下文对象，所有绘图操作都通过它进行：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

基础形状绘制方法

Canvas 不提供“画矩形”“画圆”这样的高级图形对象，而是封装了常用路径的快捷方法：

• 矩形：直接绘制，不依赖路径
  ctx.fillRect(x, y, width, height); —— 填充
  ctx.strokeRect(x, y, width, height); —— 描边
  ctx.clearRect(x, y, width, height); —— 清空指定区域
• 路径类图形（线、三角形、圆、多边形等）：需配合路径 API 使用
  ctx.beginPath(); —— 开始新路径（必调，否则会累积旧路径）
  ctx.moveTo(x, y); —— 移动画笔到起点
  ctx.lineTo(x, y); —— 画直线到目标点
  ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); —— 画圆弧（可组合成整圆）
  ctx.closePath(); —— 自动连线回起点（闭合路径）
  ctx.fill(); 或 ctx.stroke(); —— 才真正渲染

常用样式与状态控制

绘图效果由当前上下文状态决定，这些属性影响后续所有绘制：

• 颜色与透明度：ctx.fillStyle = '#ff6b6b';（填充色），ctx.strokeStyle = 'blue';（描边色），ctx.globalAlpha = 0.7;
• 线条样式：ctx.lineWidth = 3;，ctx.lineCap = 'round';（端点形状），ctx.lineJoin = 'bevel';（连接处样式）
• 保存/恢复状态：ctx.save(); 记录当前样式和变换，ctx.restore(); 回退——适合局部设置，避免污染全局

简单例子：画一个带描边的红色圆

ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2); // 圆心(200,150)，半径50
ctx.fillStyle = 'red';
ctx.fill();
ctx.strokeStyle = 'darkred';
ctx.lineWidth = 2;
ctx.stroke();

基本上就这些。Canvas 是“命令式绘图”，关键在于理解路径（path）机制和上下文状态管理。不复杂但容易忽略 beginPath() 和 save()/restore()，导致意外叠加或样式错乱。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Canvas绘图技巧与API使用全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。