javascript中canvas绘制矩形需先获取2d上下文，再用strokerect描边、fillrect填充、clearrect清除；坐标原点在左上角，描边与填充颜色及线宽需分别设置。
在 JavaScript 中使用 Canvas API 绘制矩形，核心是获取 <canvas></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) 开始向右下绘制指定宽高的矩形轮廓：
-
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)，效果是用当前填充色铺满整个矩形区域：
- 填充颜色由
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);
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
