fillStyle

2023年08月11日

柏拉文

越努力，越幸运

一、认识

---

ctx.fillStyle 是 Canvas 2D API 使用内部方式描述颜色和样式的属性。默认值是 #000 （黑色）。

二、语法

---

ctx.fillStyle = color;
ctx.fillStyle = gradient;
ctx.fillStyle = pattern;

• color: DOMString 字符串，被转换成 CSS <color> 颜色值。

• gradient: CanvasGradient 对象（线性渐变或者放射性渐变）.

• pattern: CanvasPattern 对象（可重复图像）。

三、场景

---

3.1 切换填充颜色

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

<script>
    const canvas = document.querySelector("#canvas");
    canvas.width = 500;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'red';
    ctx.fillRect(0,0,100,100);
</script>