还记得我第一次用dc.rectangle()时，差点把整个画布搞乱。那是在一个深夜加班的数据面板项目里，我自信满满地写下了几行矩形绘制代码，结果画出来的矩形全部挤在左上角——原来我把坐标参数理解成了中心点而非左上角起点。这种基础错误现在想来好笑，但当时真的让我对着屏幕懵了半小时。其实Canvas的矩形绘制看似简单，却藏着不少容易踩坑的细节。今天我就结合自己五年摸爬滚打的经验，聊聊这个最基础却最关键的API。
参数设置：别小看那几个数字
dc.rectangle(x, y, width, height)这四个参数表面上简单明了，但实际使用时很多人会忽略它们的坐标系特性。x和y指的是矩形左上角在画布上的坐标，而不是中心点——这是我当年踩的第一个坑。在2019年的一个UI组件开发项目中，我需要绘制一组等间距排列的矩形按钮，结果因为误将x/y当作中心坐标，导致所有元素位置偏移了半个宽度。
这里有个实用技巧：如果你想要以中心点为基准绘制矩形，可以这样计算参数：
// 以(centerX, centerY)为中心绘制矩形
dc.rectangle(centerX - width/2, centerY - height/2, width, height);
宽度和高度参数也并非总是安全的。我曾经遇到过负数宽度导致矩形渲染异常的情况——在某些浏览器中，负值会被自动校正为正数，但在移动端WebView中却可能直接导致绘制失败。所以我现在养成了习惯，在传入参数前先做数值校验：
// 参数校验示例
if (width < 0 || height < 0) {
console.warn('矩形尺寸不能为负值');
return;
}
填充与描边：不只是颜色那么简单
填充样式设置看似直接，但其实有很多门道。除了基本的颜色值，Canvas还支持渐变和图案填充。在2021年的一个数据可视化项目中，我需要为矩形柱状图添加渐变效果，最初我是这样写的：
// 错误示例：渐变范围设置不当
const gradient = dc.createLinearGradient(0, 0, 100, 0);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(1, 'red');
dc.fillStyle = gradient;
dc.fillRect(10, 10, 50, 100);
结果发现渐变效果很不自然——原来渐变坐标是相对于整个画布而不是当前矩形的。修正后的做法是先计算矩形相对位置：
// 正确做法：基于矩形位置设置渐变
const gradient = dc.createLinearGradient(
rectX, rectY,
rectX + rectWidth, rectY
);
描边设置也有类似陷阱。有一次我因为忘记设置lineWidth属性，导致描边几乎看不见（默认线宽只有1.0）。现在我的最佳实践是明确设置所有描边属性：
// 完整的描边设置
dc.strokeStyle = '#3498db';
dc.lineWidth = 2;
dc.lineJoin = 'round'; // 避免尖角
dc.setLineDash([]); // 显式设置实线，避免继承之前的虚线设置
dc.strokeRect(x, y, width, height);
说到性能，我发现填充大量矩形时，使用十六进制颜色值比rgba()性能更好——在去年的一个游戏项目中，改成十六进制后渲染帧率提升了约15%。这可能是因为浏览器对十六进色的解析优化得更好。
高级技巧：超越基础矩形
有时候单纯使用rectangle()并不够灵活。比如需要圆角矩形时，我们就得借助arcTo()或Path2D API。但我发现一个折中方案：先绘制标准矩形，然后用clip()方法结合圆角路径来裁剪。这种方法在需要兼容复杂背景时特别有用。
响应式设计中的矩形绘制也是个挑战。画布尺寸变化时，所有矩形的坐标和尺寸都需要重新计算——不像CSS那样自动适配。我的解决方案是封装一个响应式矩形绘制函数：
function drawResponsiveRect(dc, xRatio, yRatio, wRatio, hRatio) {
const canvasWidth = dc.canvas.width;
const canvasHeight = dc.canvas.height;
dc.rect(
xRatio * canvasWidth,
yRatio * canvasHeight,
wRatio * canvasWidth,
hRatio * canvasHeight
);
}
图案填充是另一个值得深入的话题。在一次电商项目中，我需要为商品卡片添加纹理背景，最初每帧都重新创建ImagePattern，导致严重性能问题。后来改为缓存pattern对象，性能提升了数十倍：
// 缓存pattern对象
const patterns = {};
function getCachedPattern(imageSrc) {
if (!patterns[imageSrc]) {
const img = new Image();
img.onload = () => {
patterns[imageSrc] = dc.createPattern(img, 'repeat');
};
img.src = imageSrc;
}
return patterns[imageSrc];
}
常见坑与填坑指南
根据我的调试经验，矩形绘制最常见的问题可以分为这几类：
坐标系误解是最常见的——总是记住Canvas的坐标系原点在左上角，y轴向下为正。我有一次花了两个小时调试一个“消失的矩形”，最后发现是y坐标设成了负值。
样式继承问题也很棘手。Canvas上下文会保持之前的样式设置，如果你不显式重置，可能会意外继承之前的填充或描边样式。我的习惯是在绘制前显式设置所有相关属性。
性能问题往往被忽视。在需要绘制大量矩形时（比如可视化中的柱状图），批量操作比单独绘制每个矩形效率高得多。你可以先beginPath()，然后连续调用多个rect()，最后统一fill()或stroke()。
尺寸精度问题在高清屏上特别明显。忘记考虑devicePixelRatio会导致矩形模糊——这是我刚开始做移动端项目时的教训。现在我的标准做法是：
const dpr = window.devicePixelRatio || 1;
dc.scale(dpr, dpr);
// 所有绘制代码需要基于缩放后的坐标系调整参数
什么时候不用rectangle()
虽然dc.rectangle()很强大，但并不是所有情况都适用。对于特别复杂的形状，使用Path2D可能更合适；对于需要频繁更新位置的矩形，也许用div+CSS动画性能更好——特别是在移动设备上。
我记得在一个需要大量交互式矩形的项目中，最初用Canvas实现后发现触摸事件处理很麻烦，后来改用SVG反而开发效率更高。关键是选择适合场景的技术，而不是死守一种方案。
话说回来，Canvas矩形的最大优势在于它的灵活性和性能控制。对于数据可视化、游戏、特效等场景，它仍然是不可替代的。只是需要记住：没有银弹，只有最适合的工具。
写在最后
矩形绘制看似是Canvas中最基础的功能，但深入下去会发现很多值得琢磨的细节。我从最初的无知到现在能熟练运用各种技巧，中间经历了无数次的调试和优化。最重要的经验是：不要假设任何事情，总是验证你的参数和样式设置。
如果你刚开始学习Canvas，建议从最简单的矩形开始，逐步尝试不同的参数组合和样式设置。亲手实验比读十篇文章都有用——我当年就是在不断试错中真正理解了坐标系和样式继承的工作机制。
对了，如果你有更好的矩形绘制技巧或者遇到过有趣的问题，欢迎分享出来。技术学习从来都不是单向的，每个人的经验都能帮助其他人少走弯路。毕竟，我们都是在踩过无数坑之后才慢慢成长起来的，不是吗？
评论