Canvas画矩形教程详解

前往漫画官网入口并下载

本文详细介绍了HTML5 Canvas绘制矩形的方法，助力开发者掌握Canvas绘图技巧。首先，需要获取Canvas的2D上下文，然后利用`fillRect()`填充矩形、`strokeRect()`绘制矩形边框以及`clearRect()`清除矩形区域。文章还深入探讨了如何通过`fillStyle`、`strokeStyle`和`lineWidth`等属性精细控制矩形的颜色和边框样式，并提供圆角矩形的绘制方案，即通过路径方法`beginPath()`、`lineTo()`、`arcTo()`等实现。此外，文章强调了理解Canvas坐标系统的重要性，以及区分Canvas的HTML属性尺寸和CSS样式尺寸，避免因尺寸不一致导致的显示异常，助你高效绘制出精美的矩形图案。

答案：在HTML5 Canvas上绘制矩形需获取2D上下文，使用fillRect()填充、strokeRect()描边、clearRect()清除；通过fillStyle、strokeStyle、lineWidth等属性控制颜色与边框，结合路径方法可绘制圆角矩形，并需注意Canvas坐标系及实际尺寸与CSS尺寸的差异以避免显示异常。

要在HTML5 Canvas上绘制矩形，核心是利用其2D渲染上下文提供的方法。最直接的莫过于fillRect()和strokeRect()，前者填充矩形，后者只绘制边框。如果你想清除某个区域，clearRect()也同样以矩形为单位。

解决方案

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

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

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

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

1. 填充矩形 (fillRect(x, y, width, height)): 这是最常用的，直接画一个实心的矩形。x和y是矩形左上角的坐标，width和height自然就是宽度和高度了。比如，我想在(50, 50)的位置画一个100x80的红色矩形，我会这么写：

   ctx.fillStyle = 'red'; // 设置填充颜色
   ctx.fillRect(50, 50, 100, 80);

   这里有个小细节，fillStyle是全局的，你设置一次，后续的填充操作都会用这个颜色，直到你改它。

2. 绘制矩形边框 (strokeRect(x, y, width, height)): 如果你只是想要一个空心的矩形框，strokeRect就派上用场了。参数和fillRect一样。

   ctx.strokeStyle = 'blue'; // 设置边框颜色
   ctx.lineWidth = 2;       // 设置边框宽度
   ctx.strokeRect(200, 50, 100, 80);

   strokeStyle和lineWidth也是类似的，它们控制边框的颜色和粗细。

3. 清除矩形区域 (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绘图的精髓，把所有图形都看作是一系列路径的组合。

理解Canvas坐标系统和尺寸：绘制矩形时的基础与陷阱

没错，坐标系统和尺寸，这真的是Canvas绘图的基石。我见过不少人，包括我自己刚开始的时候，总是在这里犯迷糊。

Canvas的坐标系统是一个二维直角坐标系，原点(0,0)位于Canvas的左上角。X轴正方向向右，Y轴正方向向下。这和数学上常见的Y轴向上有些不同，所以刚接触时需要适应一下。

当你说fillRect(50, 50, 100, 80)时，它意味着：

• 矩形的左上角在(50, 50)这个像素点。
• 从(50, 50)开始，向右延伸100个像素（宽度）。
• 从(50, 50)开始，向下延伸80个像素（高度）。

一个常见的“陷阱”是关于Canvas元素的CSS尺寸和实际绘图尺寸。HTML中，标签你可以用CSS设置width和height，但Canvas不行。Canvas有两个尺寸：

1. HTML属性尺寸 (): 这是Canvas内部绘图区域的实际像素尺寸。所有绘图操作都基于这个尺寸。
2. CSS样式尺寸 (canvas { width: 800px; height: 600px; }): 这是Canvas元素在浏览器中显示的尺寸。

如果这两个尺寸不一致，Canvas内部的绘图内容会被缩放以适应CSS尺寸。比如，你设置

文中关于Canvas,矩形,fillRect,strokeRect,圆角矩形的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Canvas画矩形教程详解》文章吧，也可关注golang学习网公众号了解相关技术文章。