跳到主要内容

fill

2023年08月11日
柏拉文
越努力，越幸运

一、认识​

ctx.fill() 是 Canvas 2D API 根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。

二、语法​

ctx.fill()

ctx.fill(fillRule);

ctx.fill(path,fillRule);

  • fillRule: 一种算法，决定点是在路径内还是在路径外。 允许的值:

    • nonzero: 非零环绕规则，默认的规则。

    • evenodd: 奇偶环绕规则。

  • path: 需要填充的 Path2D 路径。

三、场景​

3.1 填充矩形​

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.rect(0,0,200,100);
ctx.fill();