fillRect 是 Canvas 2D 绘图中用于绘制并填充实心矩形的方法，语法为 ctx.fillRect(x, y, width, height)，需预先设置 fillStyle 填充色，坐标原点在左上角，支持负宽高，不涉及描边。
fillRect 是 HTML5 Canvas 2D 绘图上下文（CanvasRenderingContext2D）提供的一个基础方法，用于在画布上绘制并填充一个实心矩形。
基本语法和参数含义
调用方式为：ctx.fillRect(x, y, width, height);
- x：矩形左上角的横坐标（相对于 canvas 左上角原点）
- y：矩形左上角的纵坐标
- width：矩形宽度（正数向右延伸）
- height：矩形高度（正数向下延伸）
必须先设置填充颜色
fillRect 不接受颜色参数，它使用当前上下文的 fillStyle 属性作为填充色。默认是黑色（"#000000"），但通常需要显式设置：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
ctx.fillStyle = "#ff6b35";（十六进制） -
ctx.fillStyle = "rgb(255, 107, 53)";（RGB） -
ctx.fillStyle = "rgba(255, 107, 53, 0.7)";（带透明度） -
ctx.fillStyle = "red";（命名颜色）
完整示例代码
以下是一个可直接运行的最小示例：
<canvas id="myCanvas" width="300" height="200"></canvas><script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#4CAF50'; // 设置绿色填充色
ctx.fillRect(50, 30, 120, 80); // 在 (50,30) 处画一个 120×80 的矩形
</script>
执行后，画布上会显示一个左上角在 (50, 30)、宽 120 像素、高 80 像素的绿色实心矩形。
注意几个常见细节
- 坐标系原点在 canvas 左上角，x 向右增大，y 向下增大
- 如果 width 或 height 为负数，矩形会向左或向上延伸（仍能正常渲染）
- fillRect 不受
strokeStyle和lineWidth影响（它只填充，不描边） - 若需描边+填充，应配合使用
strokeRect()或先rect()+fill()+stroke()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
