JavaScript中Canvas绘制矩形需先获取2D上下文，再用strokeRect描边、fillRect填充、clearRect清除；坐标原点在左上角，描边与填充颜色及线宽需分别设置。
在 JavaScript 中使用 Canvas API 绘制矩形，核心是获取 <canvas> 元素的 2D 渲染上下文，再调用其矩形绘制方法。关键在于理解“描边”和“填充”是两个独立操作，且需注意坐标系原点在左上角。
获取 Canvas 上下文
先通过 document.getElementById 获取 canvas 元素，再用 getContext('2d') 获取绘图环境：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
绘制空心矩形（仅描边）
使用 strokeRect(x, y, width, height)，从点 (x, y) 开始向右下绘制指定宽高的矩形轮廓：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
-
x和y是矩形左上角坐标（不是中心） - 描边颜色由
ctx.strokeStyle控制，默认为黑色 - 线宽由
ctx.lineWidth设置，默认为 1
ctx.strokeStyle = '#007acc'; ctx.lineWidth = 2; ctx.strokeRect(50, 30, 200, 100); // 左上角(50,30)，宽200，高100
绘制实心矩形（仅填充）
使用 fillRect(x, y, width, height)，效果是用当前填充色铺满整个矩形区域：
立即学习“Java免费学习笔记（深入）”；
- 填充颜色由
ctx.fillStyle控制，默认为黑色 - 它不依赖描边设置，也不受
lineWidth影响 - 可与
strokeRect配合使用，实现“带边框的实心矩形”
ctx.fillStyle = '#ffcc00'; ctx.fillRect(100, 80, 150, 60); // 同时描边+填充 ctx.fillStyle = '#4caf50'; ctx.strokeStyle = '#2e7d32'; ctx.lineWidth = 3; ctx.fillRect(200, 120, 120, 80); ctx.strokeRect(200, 120, 120, 80);
清除矩形区域（可选但实用）
用 clearRect(x, y, width, height) 可擦除指定区域（变为透明或背景色），常用于动画或重绘：
- 它会清除该区域内所有已绘制内容（包括图像、文字、其他图形）
- 若 canvas 背景是纯色，清除后会显示该背景色；否则显示透明
// 擦除左上角 100×100 区域 ctx.clearRect(0, 0, 100, 100);
