Canvas绘制矩形的三种方法及实战技巧

1. 前端萌新别慌！Canvas画矩形就这三招（附避坑指南）

第一次接触Canvas时，我天真地以为这不过是个简单的绘图API。直到真正开始使用，才发现光是画个矩形就暗藏玄机。这篇文章将分享我在Canvas绘制矩形过程中积累的实战经验，帮助前端新人避开那些我踩过的坑。

1.1 为什么Canvas画矩形这么难？

Canvas的矩形绘制API看似简单，但实际使用中会遇到各种意料之外的问题。主要原因在于：

1. API设计理念不同：Canvas采用"状态机"模式，绘制效果受之前设置的样式影响
2. 坐标系特性：Canvas的坐标系统与CSS不同，特别是边框绘制方式
3. 路径概念：部分方法会创建路径，部分不会，混用时容易出错

记得我第一次用Canvas做数据可视化时，想给柱状图加边框，结果发现fillRect和strokeRect不能简单叠加使用，这个问题困扰了我整整一个下午。

2. Canvas绘制矩形的三种核心方法

2.1 fillRect：快速绘制实心矩形

fillRect(x, y, width, height)是最简单的矩形绘制方法，适合快速创建填充矩形。

2.1.1 基础用法

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

ctx.fillStyle = '#3498db'; // 设置填充颜色
ctx.fillRect(50, 50, 200, 100); // 绘制矩形

2.1.2 适用场景

• 数据可视化：快速绘制柱状图的柱子
• 游戏开发：绘制俄罗斯方块等简单图形
• UI元素：创建按钮、背景等基础组件

2.1.3 注意事项

1. 样式继承：fillRect会使用当前的fillStyle，忘记设置会导致意外颜色
2. 无边框：此方法只绘制填充，不包含边框
3. 性能优势：在需要绘制大量简单矩形时性能最佳

2.2 strokeRect：专精边框绘制

当只需要矩形边框时，`strokeRect(x, y, wi