CanvasRenderingContext2D: fillRect() 方法
Canvas 2D API 的 CanvasRenderingContext2D.fillRect() 方法会绘制一个根据当前 fillStyle 填充的矩形。
此方法直接绘制到画布上，而不会修改当前路径，因此任何后续的 fill() 或 stroke() 调用都不会对其产生影响。
语法
js
fillRect(x, y, width, height)
fillRect() 方法会绘制一个填充矩形，其起始点为 (x, y)，尺寸由 width 和 height 指定。填充样式由当前的 fillStyle 属性决定。
参数
返回值
无（undefined）。
示例
一个简单的填充矩形
本示例使用 fillRect() 方法绘制了一个绿色的填充矩形。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
矩形的左上角位于 (20, 10)。它的宽度为 150，高度为 100。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 10, 150, 100);
结果
填充整个画布
此代码片段用一个矩形填充了整个画布。这对于创建背景非常有用，然后可以在其上绘制其他内容。要实现这一点，矩形的尺寸应等于 <canvas> 元素的 width 和 height 属性。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);
规范
| 规范 |
|---|
| HTML # dom-context-2d-fillrect-dev |
浏览器兼容性
加载中…