当前位置：首页 > 文章列表 > 文章 > 前端 > Canvas画矩形教程详解

Canvas画矩形教程详解

2025-10-31 22:51:03 0浏览收藏

解决方案

说起在Canvas上画矩形，其实这事儿挺基础，但又无处不在。我个人觉得，理解这几个基本方法，几乎就打开了Canvas绘图的大门。

我们通常会先获取Canvas元素，然后拿到它的2D渲染上下文。这上下文就像你的画笔和颜料盒。

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

拿到ctx之后，画矩形就简单了。

填充矩形 (fillRect(x, y, width, height)): 这是最常用的，直接画一个实心的矩形。x和y是矩形左上角的坐标，width和height自然就是宽度和高度了。比如，我想在(50, 50)的位置画一个100x80的红色矩形，我会这么写：
```
ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fillRect(50, 50, 100, 80);
```
这里有个小细节，fillStyle是全局的，你设置一次，后续的填充操作都会用这个颜色，直到你改它。
绘制矩形边框 (strokeRect(x, y, width, height)): 如果你只是想要一个空心的矩形框，strokeRect就派上用场了。参数和fillRect一样。
```
ctx.strokeStyle = 'blue'; // 设置边框颜色
ctx.lineWidth = 2;       // 设置边框宽度
ctx.strokeRect(200, 50, 100, 80);
```
strokeStyle和lineWidth也是类似的，它们控制边框的颜色和粗细。
清除矩形区域 (clearRect(x, y, width, height)): 有时候，你画错了，或者想做动画，需要擦掉一部分内容。clearRect就是你的橡皮擦，它会把指定区域内的所有像素都变成透明。
```
// 假设之前画了一个大矩形，现在想清除中间一块
ctx.clearRect(70, 70, 60, 40);
```
这在做动画时特别有用，每一帧开始前，我们通常会用clearRect把整个Canvas清空，再重新绘制。当然，只清除需要更新的部分，性能会更好些。

我发现很多初学者会混淆这几个，其实它们各司其职，理解它们的功能边界，用起来就顺手多了。

Canvas绘制矩形时，如何精细控制颜色、边框样式和圆角？

这确实是个好问题，因为光是画个方块，很多时候是不够的。我们希望它有特定的颜色，边框粗细，甚至圆角。

对于颜色和边框，前面提到了ctx.fillStyle和ctx.strokeStyle。它们不仅接受CSS颜色字符串（如'red', '#FF0000', 'rgb(255,0,0)'），还能接受渐变（createLinearGradient, createRadialGradient）和图案（createPattern）。这给了我们极大的灵活性。

// 渐变填充
const gradient = ctx.createLinearGradient(0, 0, 100, 0);
gradient.addColorStop(0, 'purple');
gradient.addColorStop(1, 'orange');
ctx.fillStyle = gradient;
ctx.fillRect(50, 150, 100, 80);

// 虚线边框
ctx.strokeStyle = 'green';
ctx.lineWidth = 3;
ctx.setLineDash([5, 5]); // 设置虚线模式：5像素实线，5像素空白
ctx.strokeRect(200, 150, 100, 80);
ctx.setLineDash([]); // 记得用完清空，否则会影响后续的线条绘制

至于圆角矩形，Canvas原生并没有直接提供roundRect()这样的方法（虽然最新的标准已经有了，但兼容性还没那么好）。所以，我们通常需要自己动手，通过路径（Path）来绘制。这稍微复杂一点，但非常常用。

function drawRoundRect(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.fillStyle = '#FFD700'; // 金色
drawRoundRect(ctx, 50, 250, 100, 80, 10);
ctx.fill();

// 绘制一个带圆角的边框矩形
ctx.strokeStyle = '#4682B4'; // 钢蓝色
ctx.lineWidth = 2;
drawRoundRect(ctx, 200, 250, 100, 80, 15);
ctx.stroke();

你会发现，一旦涉及到更复杂的形状，路径操作beginPath(), lineTo(), arcTo(), closePath(), fill(), stroke()就成了核心。这其实是Canvas绘图的精髓，把所有图形都看作是一系列路径的组合。