HTML canvas strokeRect() 方法（一文讲透）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 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/ ;

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

什么是 HTML Canvas？

HTML Canvas 是一种基于 HTML5 的绘图技术，允许开发者在网页中直接绘制图形、动画和交互式内容。它本质上是一个矩形区域，通过 JavaScript 的 Canvas API 可以控制画布上的每一个像素。Canvas 的核心概念是“画布上下文”（context），它提供了丰富的绘图方法，而 strokeRect() 方法正是其中之一。

strokeRect() 方法：绘制矩形边框的入门指南

基础语法与核心功能

strokeRect() 是 Canvas 上下文中的一个方法，用于在画布上绘制一个矩形边框。它的语法如下：

context.strokeRect(x, y, width, height);

• 参数说明：
  • x：矩形左上角的横坐标。
  • y：矩形左上角的纵坐标。
  • width：矩形的宽度。
  • height：矩形的高度。

这个方法与 fillRect() 类似，但区别在于：fillRect() 会填充矩形的内部，而 strokeRect() 只绘制边框。

比喻理解：画布就像一张白纸

想象你有一张白纸（Canvas），用铅笔在纸上画一个空心的矩形框。strokeRect() 就像这根铅笔——它只在纸上留下边框的线条，而不填充内部的颜色。

第一个示例：绘制简单矩形边框

<canvas id="myCanvas" width="200" height="200"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const context = canvas.getContext('2d');
  context.strokeRect(50, 50, 100, 100);
</script>

运行效果：

• 在画布左上角坐标（50,50）处，绘制一个宽高均为 100 的矩形边框。

参数详解：坐标与尺寸的精确控制

坐标系与画布原点

Canvas 的坐标系默认以左上角为原点（0,0），向右为 x 轴正方向，向下为 y 轴正方向。因此，x 和 y 参数决定了矩形左上角的起点。

示例：调整坐标参数

// 绘制两个不同位置的矩形
context.strokeRect(20, 20, 80, 80);  // 靠近左上角
context.strokeRect(100, 100, 80, 80); // 中心区域

宽度与高度的逻辑

width 和 height 参数控制矩形的尺寸，但需注意：

• 负值无效：如果 width 或 height 为负数，矩形不会被绘制。
• 单位是像素：所有参数默认以像素为单位。

示例：负值参数的影响

// 下面的代码不会绘制任何内容
context.strokeRect(50, 50, -100, 100); 

表格对比：参数变化对绘制效果的影响

进阶技巧：样式与线条的控制

修改边框颜色：strokeStyle 属性

通过 context.strokeStyle 可以设置边框的颜色，支持 CSS 颜色值（如 #FF0000、rgba(255,0,0,0.5)）。

示例：红色边框

context.strokeStyle = 'red';
context.strokeRect(50, 50, 100, 100);

调整线宽：lineWidth 属性

context.lineWidth 控制边框的粗细，默认值为 1 像素。

示例：粗线边框

context.lineWidth = 5;
context.strokeRect(30, 30, 140, 140); // 线宽增加后，边框会向外扩展

动态绘制与交互：让矩形动起来

通过 JavaScript 的 requestAnimationFrame() 或事件监听，可以实现动态效果。

示例：鼠标移动时绘制跟随的矩形

<canvas id="myCanvas" width="400" height="400"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const context = canvas.getContext('2d');

  canvas.addEventListener('mousemove', (e) => {
    // 获取鼠标相对于画布的坐标
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // 清空画布并重新绘制
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.strokeRect(x - 20, y - 20, 40, 40);
  });
</script>

效果：鼠标移动时，画布上会跟随一个边长 40px 的矩形框。

常见问题与解决方案

问题 1：矩形没有显示出来？

• 可能原因：坐标或尺寸参数设置不当。
• 解决方法：检查 x、y、width、height 的值是否在画布范围内。

问题 2：线条颜色未生效？

• 可能原因：未在调用 strokeRect() 之前设置 strokeStyle。
• 解决方法：确保 context.strokeStyle 在绘制前被赋值。

实战案例：绘制动态网格

通过循环和 strokeRect() 方法，可以快速创建网格效果。

function drawGrid() {
  const spacing = 20; // 格子间距
  context.strokeStyle = '#ccc'; // 浅灰色线条
  context.lineWidth = 1;

  // 绘制垂直线
  for (let x = 0; x <= canvas.width; x += spacing) {
    context.moveTo(x, 0);
    context.lineTo(x, canvas.height);
  }

  // 绘制水平线
  for (let y = 0; y <= canvas.height; y += spacing) {
    context.moveTo(0, y);
    context.lineTo(canvas.width, y);
  }

  // 执行绘制
  context.stroke();
}

// 调用方法
drawGrid();

效果：生成一个 20px 间距的网格背景，可用于游戏开发或布局辅助。

结论：掌握 strokeRect() 的价值

strokeRect() 是 HTML Canvas 的基础方法之一，但它远不止于绘制简单的边框。结合样式控制、动态交互和循环逻辑，开发者可以创造出丰富的视觉效果。无论是游戏开发、数据可视化，还是交互式设计，这一方法都是不可或缺的工具。

通过本文的示例和技巧，希望读者不仅能理解 strokeRect() 的用法，还能将其灵活运用于实际项目中。接下来，可以尝试将此方法与 fillRect()、arc() 等其他 Canvas 方法结合，探索更复杂的图形组合。

关键词布局回顾：

• 在标题、方法介绍、代码示例说明中自然融入“HTML canvas strokeRect() 方法”关键词，确保内容与主题强相关。
• 通过对比 fillRect() 和 strokeRect()，突出方法的核心差异，强化读者记忆。