js画布怎么填颜色

在使用JavaScript操作HTML5画布时，可以通过设置画布的填充颜色来绘制彩色图形。 主要方法有使用fillStyle属性、fillRect方法、以及其他绘图方法。fillStyle属性设置填充颜色、fillRect方法绘制矩形、其他绘图方法如fillText和beginPath绘制文本和路径。 下面将详细介绍如何使用这些方法来填充颜色，并提供一些实际的代码示例。

一、HTML5画布基础

在开始使用JavaScript为画布填色之前，我们需要理解HTML5画布的基础知识。HTML5画布是通过<canvas>元素来实现的，它提供了一个用于绘图的区域。

1、创建画布元素

首先，我们需要在HTML中创建一个画布元素：

<canvas id="myCanvas" width="500" height="500"></canvas>

2、获取画布上下文

在JavaScript中，我们需要获取画布的上下文对象，这个对象提供了多种绘图方法和属性：

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

二、填充颜色的方法

1、设置填充颜色

我们可以使用fillStyle属性来设置填充颜色。fillStyle属性接受任何有效的CSS颜色值，如颜色名称、RGB、RGBA、HEX等。

ctx.fillStyle = 'red'; // 设置填充颜色为红色
ctx.fillStyle = '#00FF00'; // 设置填充颜色为绿色
ctx.fillStyle = 'rgb(0, 0, 255)'; // 设置填充颜色为蓝色
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 设置填充颜色为半透明红色

2、填充矩形

使用fillRect方法可以在画布上绘制一个填充矩形。fillRect方法接受四个参数：x坐标、y坐标、宽度和高度。

ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100); // 在(50, 50)位置绘制一个100x100的蓝色矩形

3、填充路径

如果需要绘制更复杂的图形，可以使用路径。路径是由一系列点和线段组成的。我们可以使用beginPath方法开始一个新路径，使用moveTo和lineTo方法定义路径，然后使用fill方法填充路径。

ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(250, 250);
ctx.lineTo(150, 250);
ctx.closePath();
ctx.fillStyle = 'purple';
ctx.fill(); // 填充路径

4、填充文本

我们还可以使用fillText方法在画布上绘制填充文本。fillText方法接受三个参数：文本内容、x坐标和y坐标。

ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('Hello, Canvas!', 50, 50); // 在(50, 50)位置绘制文本

三、渐变填充

除了纯色填充，HTML5画布还支持渐变填充。渐变分为线性渐变和径向渐变。

1、线性渐变

可以使用createLinearGradient方法创建一个线性渐变对象，然后使用addColorStop方法添加颜色停靠点，最后将渐变对象赋值给fillStyle。

const linearGradient = ctx.createLinearGradient(0, 0, 200, 0);
linearGradient.addColorStop(0, 'red');
linearGradient.addColorStop(1, 'yellow');
ctx.fillStyle = linearGradient;
ctx.fillRect(10, 10, 200, 100); // 绘制线性渐变矩形

2、径向渐变

可以使用createRadialGradient方法创建一个径向渐变对象。

const radialGradient = ctx.createRadialGradient(75, 75, 50, 75, 75, 90);
radialGradient.addColorStop(0, 'blue');
radialGradient.addColorStop(1, 'white');
ctx.fillStyle = radialGradient;
ctx.fillRect(10, 10, 200, 200); // 绘制径向渐变矩形

四、图案填充

我们还可以使用图像来填充画布。可以使用createPattern方法创建一个图案对象。

const img = new Image();
img.src = 'pattern.png';
img.onload = function() {
  const pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 500, 500); // 使用图案填充画布
};

五、综合示例

下面是一个综合示例，展示了如何使用各种填充方法在画布上绘制不同的图形：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制纯色矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);
// 绘制线性渐变矩形
const linearGradient = ctx.createLinearGradient(0, 0, 200, 0);
linearGradient.addColorStop(0, 'blue');
linearGradient.addColorStop(1, 'green');
ctx.fillStyle = linearGradient;
ctx.fillRect(120, 10, 100, 100);
// 绘制径向渐变矩形
const radialGradient = ctx.createRadialGradient(75, 75, 50, 75, 75, 90);
radialGradient.addColorStop(0, 'yellow');
radialGradient.addColorStop(1, 'orange');
ctx.fillStyle = radialGradient;
ctx.fillRect(230, 10, 100, 100);
// 绘制图案填充矩形
const img = new Image();
img.src = 'pattern.png';
img.onload = function() {
  const pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(340, 10, 100, 100);
};
// 绘制填充路径
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(150, 250);
ctx.lineTo(50, 250);
ctx.closePath();
ctx.fillStyle = 'purple';
ctx.fill();
// 绘制填充文本
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('Hello, Canvas!', 50, 300);

通过以上内容，我们详细介绍了如何使用JavaScript在HTML5画布上填充颜色，包括纯色填充、渐变填充、图案填充等方法。希望这些示例能帮助你更好地理解和应用这些技术。