HTML Canvas fillStyle 属性

fillStyle 属性的基本用法

fillStyle 属性用来设置填充的颜色或样式，可以是颜色值、渐变对象或图案对象。在使用 fillStyle 属性之前，需要先获取 Canvas 的上下文对象，然后通过该对象来设置 fillStyle 属性。

示例代码如下：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置填充颜色为红色
ctx.fillStyle = 'red';

// 绘制一个矩形并填充颜色
ctx.fillRect(10, 10, 100, 100);

在上面的示例中，我们首先获取了 id 为 myCanvas 的 Canvas 元素，并获取了其 2D 上下文对象 ctx。然后，我们设置 fillStyle 属性为红色，最后绘制了一个填充颜色为红色的矩形。

填充颜色的设置

fillStyle 属性可以接受多种类型的值，包括颜色值、渐变对象和图案对象。下面分别介绍这三种类型的设置方法。

1. 颜色值

可以直接使用颜色值来设置 fillStyle 属性，颜色值可以是十六进制、RGB、RGBA 或颜色名称。例如：

ctx.fillStyle = '#00ff00'; // 绿色
ctx.fillStyle = 'rgb(255, 0, 0)'; // 红色
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.fillStyle = 'blue'; // 蓝色

2. 渐变对象

可以使用 createLinearGradient() 或 createRadialGradient() 方法创建渐变对象，然后将其设置为 fillStyle 属性的值。例如：

// 创建线性渐变对象
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;

3. 图案对象

可以使用 createPattern() 方法创建图案对象，然后将其设置为 fillStyle 属性的值。例如：

const img = new Image();
img.src = 'pattern.png';
img.onload = function() {
    const pattern = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = pattern;
};

总结

fillStyle 属性是 HTML Canvas 中用来设置填充颜色或样式的属性，可以接受颜色值、渐变对象和图案对象作为值。通过灵活设置 fillStyle 属性，可以实现丰富多彩的图形绘制效果。希望本文能够帮助您更好地理解和应用 fillStyle 属性。