CanvasRenderingContext2D：fill() 方法

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.fill() 方法用于根据当前的 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();

结果

指定路径和填充规则

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

HTML

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

JavaScript

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

// 创建路径
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();

// 填充路径
ctx.fillStyle = "green";
ctx.fill(region, "evenodd");

结果

规范

Specification
HTML Standard
# dom-context-2d-fill-dev

浏览器兼容性

BCD tables only load in the browser

参见