CanvasRenderingContext2D：fill() 方法

基线 广泛可用

此功能已得到很好的建立，并且可以在许多设备和浏览器版本中使用。它自 2015 年 7 月.

CanvasRenderingContext2D.fill() 方法是 Canvas 2D API 中的一种方法，它使用当前 fillStyle 填充当前或给定的路径。

语法

js
fill()
fill(path)
fill(fillRule)
fill(path, fillRule)

参数

fillRule

用于确定点在填充区域内还是区域外的算法。可能的值

nonzero

该 非零绕线规则。默认规则。

evenodd

该 奇偶绕线规则.

path

要填充的 Path2D 路径。

返回值

无 (undefined).

示例

填充矩形

此示例使用 fill() 方法填充矩形。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.fill();

结果

指定路径和 fillRule

此示例将一些相交的线保存到 Path2D 对象中。然后使用 fill() 方法将该对象渲染到画布上。通过使用 "evenodd" 规则，在对象的中心留了一个未填充的孔；默认情况下（使用 "nonzero" 规则），该孔也会被填充。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create path
let region = new Path2D();
region.moveTo(30, 90);
region.lineTo(110, 20);
region.lineTo(240, 130);
region.lineTo(60, 130);
region.lineTo(190, 20);
region.lineTo(270, 90);
region.closePath();

// Fill path
ctx.fillStyle = "green";
ctx.fill(region, "evenodd");

结果

规范

规范
HTML 标准
# dom-context-2d-fill-dev

浏览器兼容性

BCD 表仅在浏览器中加载

另请参见