CanvasRenderingContext2D:fillRect() 方法
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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);
规范
Specification |
---|
HTML Standard # dom-context-2d-fillrect-dev |
浏览器兼容性
BCD tables only load in the browser