JavaScript中的fillStyle

在JavaScript中，fillStyle是Canvas API中的一个属性，用于设置绘制的颜色、渐变或模式。fillStyle属性可以用于填充形状、矩形、文本等等。

使用方法

  // 创建一个canvas元素
  const canvas = document.createElement("canvas");

  // 获取2d绘图上下文
  const ctx = canvas.getContext("2d");

  // 设置fillStyle
  ctx.fillStyle = "red"; // 字符串形式设置颜色
  ctx.fillStyle = "#ff0000"; // 使用十六进制颜色值
  ctx.fillStyle = "rgb(255,0,0)"; // 使用RGB颜色值
  ctx.fillStyle = "rgba(255,0,0,0.5)"; // 使用RGBA颜色值（包含了alpha通道）

  // 创建一个渐变模式
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "blue");
  ctx.fillStyle = gradient; // 设置为渐变模式

  // 创建一个图案模式
  const pattern = ctx.createPattern(image, "repeat");
  ctx.fillStyle = pattern; // 设置为图案模式

  // 填充一个矩形
  ctx.fillRect(0, 0, canvas.width, canvas.height);

示例

下面是一个使用fillStyle填充矩形的例子：

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

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

ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);

使用fillStyle属性设置填充颜色为红色，并使用fillRect方法画一个填充满整个画布的矩形。

小结

fillStyle属性是Canvas API中一个很方便的属性，可以通过多种方法设置填充图案、颜色和渐变，帮助我们轻松实现各种绘图效果。