异常教程

HTML canvas rect() 方法（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 100w+ 字，讲解图 4013+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3700+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，HTML5 的 <canvas> 元素为开发者提供了一个强大的画布，可以绘制图形、创建动画或实现交互式视觉效果。而 rect() 方法作为 <canvas> 上绘制矩形的核心工具，是学习 Canvas 绘图的必经之路。无论是初学者想要入门基础图形绘制，还是中级开发者希望深入探索复杂场景，掌握 rect() 方法的使用技巧都至关重要。本文将从基础到进阶，结合案例与代码示例，系统性地解析 rect() 方法的原理与应用。

一、HTML Canvas 的基础概念与 rect() 方法的定位

1.1 什么是 HTML Canvas？

HTML Canvas 是一个矩形区域，允许开发者通过 JavaScript 直接操作其像素，实现动态图形渲染。它本质上是一个“空白画布”，开发者需要通过 API（如 rect()、lineTo()、arc() 等）在上面“绘制”内容。

1.2 rect() 方法的角色

rect() 方法是 <canvas> 的 2D 上下文（context）中的一个核心函数，专门用于绘制矩形。其语法结构如下：

context.rect(x, y, width, height);
  • 参数说明：
    • x：矩形左上角的横向坐标。
    • y：矩形左上角的纵向坐标。
    • width：矩形的宽度。
    • height：矩形的高度。

1.3 矩形的“无形”与“有形”

在 Canvas 中，调用 rect() 方法并不会立即显示图形，它只是将矩形的路径（Path）添加到当前的路径列表中。要让矩形“显形”，必须通过 fill() 或 stroke() 方法：

  • fill()：填充矩形内部。
  • stroke()：绘制矩形边框。

比喻：可以将 rect() 方法想象为在画布上“勾勒轮廓”，而 fill() 或 stroke() 则是“上色”或“描边”的动作。

二、rect() 方法的实战入门

2.1 最简单的矩形绘制

以下代码演示了如何通过 rect() 方法绘制一个基础矩形：

<canvas id="myCanvas" width="200" height="200"></canvas>  
<script>  
  const canvas = document.getElementById("myCanvas");  
  const ctx = canvas.getContext("2d");  

  // 绘制矩形  
  ctx.rect(10, 10, 180, 180);  
  ctx.fillStyle = "blue";  
  ctx.fill();  
</script>

效果：在画布左上角（坐标 (10,10)）绘制一个宽高为 180 的蓝色矩形。

2.2 矩形的填充与描边

通过调整 fillStyle 和 strokeStyle 属性，可以控制矩形的颜色和边框样式：

ctx.rect(50, 50, 100, 100);  
ctx.fillStyle = "rgba(255, 0, 0, 0.5)";  // 半透明红色填充  
ctx.fill();  

ctx.strokeStyle = "green";  
ctx.lineWidth = 5;  
ctx.stroke();

关键点：

  • fillStyle 支持颜色名称、十六进制值、RGB/RGBA 函数等。
  • stroke() 会沿路径的中心线绘制边框，边框宽度由 lineWidth 决定。

三、进阶技巧：矩形的复杂应用

3.1 多边形与路径组合

通过 rect() 和其他路径方法（如 moveTo()、lineTo()），可以组合出复杂的形状。例如，绘制一个“带缺口的矩形”：

ctx.beginPath();  
ctx.rect(20, 20, 160, 160); // 主矩形  
ctx.moveTo(60, 60);         // 移动到缺口起点  
ctx.lineTo(140, 60);        // 绘制水平线  
ctx.rect(60, 60, 80, 80);   // 内部小矩形  
ctx.fill();

3.2 动态矩形与交互

结合事件监听，可以实现矩形的动态交互。例如，通过鼠标拖拽调整矩形尺寸：

let isDrawing = false;  
let startX, startY;  

canvas.addEventListener("mousedown", (e) => {  
  isDrawing = true;  
  startX = e.offsetX;  
  startY = e.offsetY;  
});  

canvas.addEventListener("mousemove", (e) => {  
  if (!isDrawing) return;  
  ctx.clearRect(0, 0, canvas.width, canvas.height);  
  ctx.rect(  
    startX,  
    startY,  
    e.offsetX - startX,  
    e.offsetY - startY  
  );  
  ctx.stroke();  
});  

canvas.addEventListener("mouseup", () => {  
  isDrawing = false;  
});

效果：按住鼠标左键拖动时，实时绘制一个边框矩形。

四、rect() 方法的隐藏功能与性能优化

4.1 矩形与裁剪区域

通过 clip() 方法，可以将矩形路径设为裁剪区域，仅允许后续绘制内容在该区域内显示：

ctx.rect(50, 50, 100, 100);  
ctx.clip(); // 设置裁剪区域  

ctx.fillStyle = "yellow";  
ctx.fillRect(0, 0, 200, 200); // 全部填充，但仅在裁剪区域内可见

4.2 性能优化技巧

频繁调用 rect() 和绘制操作可能导致性能问题。可通过以下方式优化：

  1. 合并路径：在单个 beginPath() 和 fill()/stroke() 对中完成多个矩形绘制。
  2. 使用 fillRect() 和 strokeRect()：这两个方法直接绘制矩形，无需手动调用 fill() 或 stroke()。
// 更高效的单矩形绘制  
ctx.fillStyle = "black";  
ctx.fillRect(10, 10, 100, 100); // 直接填充

五、常见问题与解决方案

5.1 矩形位置不准确

问题：绘制的矩形位置与预期不符。
原因：Canvas 的坐标系原点在左上角，x 和 y 参数是矩形左上角的坐标。
解决：

  • 确保坐标值符合画布尺寸。
  • 使用 translate() 方法调整坐标原点： 
    ctx.translate(50, 50); // 将原点移动到 (50,50)  
ctx.rect(0, 0, 100, 100); // 相对新原点绘制

5.2 多个矩形重叠时颜色异常

问题：叠加绘制的矩形颜色混合不自然。
解决：

  • 使用 globalCompositeOperation 属性控制混合模式： 
    ctx.globalCompositeOperation = "xor"; // 设置为“异或”模式

六、实际案例：动态进度条

以下代码演示了如何通过 rect() 方法实现一个简单的动态进度条：

function drawProgress(percentage) {  
  ctx.clearRect(0, 0, canvas.width, canvas.height);  

  // 绘制背景矩形  
  ctx.rect(20, 20, 160, 20);  
  ctx.fillStyle = "#eee";  
  ctx.fill();  

  // 绘制进度条  
  const width = 160 * (percentage / 100);  
  ctx.rect(20, 20, width, 20);  
  ctx.fillStyle = "#4CAF50";  
  ctx.fill();  
}  

// 每秒更新进度（示例）  
let progress = 0;  
setInterval(() => {  
  progress += 5;  
  if (progress > 100) progress = 0;  
  drawProgress(progress);  
}, 1000);

效果：每秒进度条递增 5%，循环往复。

结论

HTML canvas rect() 方法是构建复杂图形与交互的基础工具，其灵活性与强大功能远超表面认知。从简单的填充矩形到动态交互、路径组合，开发者可以通过对 rect() 方法的深入理解，逐步实现从静态图形到动画、游戏等高级场景的跨越。掌握这一方法不仅需要熟悉语法细节，更要善于结合 Canvas 的其他 API（如变换、合成模式、路径操作等），才能真正释放其潜力。

未来随着 Web 技术的演进，Canvas 的应用场景将更加广泛，而 rect() 方法作为核心工具之一，将持续为开发者提供高效、直观的图形绘制能力。希望本文能帮助读者在编程旅程中迈出坚实的一步！

最新发布

查看更多文章