HTML5canvas标签怎么画矩形_基础绘图操作指南【说明】

fillRect()和strokeRect()是最直接的矩形绘制方法，分别用于绘制实心和空心矩形，需先获取2D上下文并设置fillStyle/strokeStyle；clearRect()仅将区域设为透明而非真正擦除；transform会影响矩形位置与尺寸，建议用save()/restore()隔离；批量绘制时应避免循环中频繁修改样式以提升性能。

用 fillRect() 和 strokeRect() 画实心/空心矩形最直接

HTML5 本身不渲染任何图形，必须通过 JavaScript 的 2D 上下文调用绘图方法。画矩形最基础的两个函数就是 fillRect()（填充）和 strokeRect()（描边），它们都接受四个参数：x、y、width、height，单位是像素，坐标原点在左上角。

常见错误是忘了获取上下文或没设置样式：

• 没调用 getContext('2d') 就直接调 fillRect() → 报错 TypeError: ctx.fillRect is not a function
• 只调 strokeRect() 但没设 ctx.strokeStyle → 矩形不可见（默认为黑色，但在深色背景或透明 canvas 上容易误判）
• 坐标写反成 width、height、x、y → 图形出现在意料之外的位置

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

// 实心红色矩形
ctx.fillStyle = '#f00';
ctx.fillRect(10, 20, 120, 80);

// 空心蓝色边框（不填充）
ctx.strokeStyle = '#00f';
ctx.lineWidth = 2;
ctx.strokeRect(150, 20, 120, 80);

clearRect() 不是“擦除”，而是“涂成透明”

很多人以为 clearRect() 是撤销或删除已有图形，其实它只是把指定区域重置为完全透明（alpha=0），相当于“盖一层透明色”。这对动画清屏有用，但要注意：

• 如果 canvas 背景是 body 的浅灰色，clearRect() 后该区域会透出灰色，看起来像“擦掉了”，实际是透底
• 如果 canvas 设置了 style="background: #eee"，clearRect() 不会影响这个 CSS 背景，只清画布像素
• 想彻底恢复纯白背景，得先 clearRect()，再用 fillRect() 填白色

ctx.clearRect(0, 0, canvas.width, canvas.height); // 清全画布
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height); // 再填白

矩形位置和尺寸受 transform 影响，但不是所有场景都需要

如果你用 ctx.translate()、ctx.scale() 或 ctx.rotate() 改变了坐标系，后续所有 fillRect() 的 x/y 都按新坐标系解释。比如：

立即学习“前端免费学习笔记（深入）”；

家作

淘宝推出的家装家居AI创意设计工具

下载

• ctx.translate(50, 50) 后，fillRect(0, 0, 100, 50) 实际画在画布 (50, 50) 位置
• ctx.scale(2, 1) 后，fillRect(10, 10, 30, 20) 会拉宽一倍，变成宽 60、高 20
• 旋转后画矩形会倾斜——但 fillRect() 本身不支持旋转参数，必须靠 transform 配合

多数静态矩形不需要 transform；一旦用了，记得用 ctx.save() / ctx.restore() 隔离影响范围，否则后续绘图全乱。

性能提示：批量矩形别用循环反复调 fillRect()

画几十个以上矩形时，频繁调用 fillRect() 可能触发过多绘制状态切换。更高效的方式是：

• 统一设置 fillStyle，再批量调用（避免每次改样式）
• 若矩形尺寸/颜色一致，考虑用 putImageData() 或 createPattern() 批量填充（适合网格类场景）
• 对动态更新的大量矩形（如游戏地图块），优先用 requestAnimationFrame + 单次清屏+重绘，而非逐个 clearRect()

浏览器对 fillRect() 有底层优化，但前提是别在循环里反复改 fillStyle 或 globalAlpha。