js画笔颜色【canvas画笔颜色：代码示例】

画笔颜色在canvas中可以通过设置颜色值来实现。在JavaScript中，我们可以使用rgb()函数或者十六进制值来表示颜色。rgb()函数接受三个参数，分别代表红色、绿色和蓝色的值，取值范围为0-255。而十六进制值则是由6个字符组成，前两个字符表示红色值，中间两个字符表示绿色值，最后两个字符表示蓝色值，每个字符的取值范围为0-F。

下面是使用rgb()函数设置画笔颜色的示例代码：

// 设置画布
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 设置画笔颜色为红色
ctx.fillStyle = "rgb(255, 0, 0)";
// 绘制矩形
ctx.fillRect(20, 20, 100, 50);

在上面的代码中，我们首先获取了一个canvas元素，并通过getContext("2d")方法获取了一个2D绘图上下文对象。然后，我们使用fillStyle属性设置了画笔的颜色为红色，即rgb(255, 0, 0)。接下来，我们使用fillRect()方法绘制了一个红色矩形。

下面是使用十六进制值设置画笔颜色的示例代码：

// 设置画布
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 设置画笔颜色为绿色
ctx.fillStyle = "#00FF00";
// 绘制矩形
ctx.fillRect(20, 20, 100, 50);

在上面的代码中，我们同样使用fillStyle属性设置了画笔的颜色，但这次使用的是十六进制值#00FF00，表示红色值为00，绿色值为FF，蓝色值为00，即纯绿色。然后，我们使用fillRect()方法绘制了一个绿色矩形。

通过上述示例代码，我们可以看到，通过设置fillStyle属性，我们可以轻松地改变画笔的颜色，从而实现不同颜色的绘制效果。