当前位置：首页 > 文章列表 > 文章 > 前端 > Canvas绘图技巧与实战教程分享

Canvas绘图技巧与实战教程分享

2025-12-23 08:09:29 0浏览收藏

1. 基础图形与路径绘制

所有复杂图形都由基本路径构成。Canvas通过路径（path）机制来定义图形轮廓。

常用方法：

beginPath()：开始新路径
moveTo(x, y)：移动“画笔”到某点
lineTo(x, y)：画直线到指定点
arc(x, y, r, startAngle, endAngle, anticlockwise)：画圆弧
quadraticCurveTo(cpx, cpy, x, y) 和 bezierCurveTo()：绘制贝塞尔曲线
closePath()：闭合路径

例如，绘制一个带圆角的矩形：

function drawRoundedRect(ctx, x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.arcTo(x + width, y, x + width, y + radius, radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
  ctx.lineTo(x + radius, y + height);
  ctx.arcTo(x, y + height, x, y + height - radius, radius);
  ctx.lineTo(x, y + radius);
  ctx.arcTo(x, y, x + radius, y, radius);
  ctx.closePath();
  ctx.stroke();
}

2. 样式与填充

设置颜色、渐变、阴影等视觉效果，让图形更丰富。

关键属性：

fillStyle：填充颜色或图案（支持CSS颜色、渐变、图案）
strokeStyle：描边颜色
lineWidth：线条宽度
lineCap / lineJoin：线条端点和连接样式

创建线性渐变示例：

const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'yellow');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

3. 变换与坐标系统操作

Canvas提供平移、旋转、缩放等变换，适合绘制重复或动态结构。

常用变换方法：

translate(x, y)：移动坐标原点
rotate(angle)：围绕原点旋转
scale(x, y)：缩放坐标系
save() 和 restore()：保存和恢复绘图状态（包括变换、样式等）

绘制旋转的星形图案：

ctx.save();
ctx.translate(150, 150); // 移动到中心
for (let i = 0; i < 8; i++) {
  ctx.rotate(Math.PI / 4);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(100, 0);
  ctx.stroke();
}
ctx.restore();

4. 组合与裁剪

使用globalCompositeOperation控制图形叠加方式，或用clip()限制绘制区域。

例如，只在圆形区域内绘制内容：

ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI * 2);
ctx.clip(); // 设置裁剪区域
// 后续绘制将被限制在圆内
ctx.fillStyle = 'blue';
ctx.fillRect(100, 100, 200, 200);

基本上就这些。通过组合路径、样式、变换和裁剪，你可以构建出从图表、图标到游戏界面等各种复杂图形。关键是把大问题拆解成小路径，逐步绘制，并善用save()和restore()管理状态。

到这里，我们也就讲完了《Canvas绘图技巧与实战教程分享》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！