html canvas fillStyle属性设置填充颜色、渐变或图案_知识百科

HTML Canvas fillStyle属性

HTML Canvas fillStyle属性可用来设置图形的填充颜色、渐变或图案。它是CanvasRenderingContext2D对象的属性，可以使用CanvasRenderingContext2D.fillStyle访问。fillStyle属性接受一个CSS颜色字符串、CanvasGradient对象或CanvasPattern对象作为参数，用于指定填充的颜色、渐变或图案。

使用fillStyle设置填充颜色

使用fillStyle设置填充颜色是最常见的用法，可以使用CSS颜色值（如“red”，“#FF0000”）来设置填充颜色。例如：

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

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);

上面的代码将在Canvas画布上绘制一个100x100像素的矩形，矩形的填充颜色为红色。

使用fillStyle设置渐变

使用fillStyle设置渐变也是一种常见的用法，可以使用CanvasGradient对象来设置渐变。CanvasGradient对象可以通过CanvasRenderingContext2D.createLinearGradient()或CanvasRenderingContext2D.createRadialGradient()方法来创建。例如：

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

// 创建线性渐变
var linearGradient = ctx.createLinearGradient(0, 0, 100, 0);
linearGradient.addColorStop(0, "red");
linearGradient.addColorStop(1, "blue");

// 设置填充渐变
ctx.fillStyle = linearGradient;
ctx.fillRect(10, 10, 100, 100);

上面的代码将在Canvas画布上绘制一个100x100像素的矩形，矩形的填充渐变从红色渐变到蓝色。

使用fillStyle设置图案

使用fillStyle设置图案也是一种常见的用法，可以使用CanvasPattern对象来设置图案。CanvasPattern对象可以通过CanvasRenderingContext2D.createPattern()方法来创建。例如：

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

// 创建图案
var img = new Image();
img.src = "pattern.png";
img.onload = function() {
  // 创建图案
  var pattern = ctx.createPattern(img, 'repeat');
  // 设置填充图案
  ctx.fillStyle = pattern;
  ctx.fillRect(10, 10, 100, 100);
};

上面的代码将在Canvas画布上绘制一个100x100像素的矩形，矩形的填充图案为pattern.png图片，并重复显示。

html canvas fillStyle属性设置填充颜色、渐变或图案