详解HTML5 Canvas绘制时指定颜色与透明度的方法

HTML5 Canvas是一个在网页中绘制图形的HTML元素，它提供了非常丰富的绘图功能。在绘制时，我们需要指定绘制的颜色和透明度，这样我们才能达到想要的效果。下面将详细介绍指定颜色与透明度的方法。

指定颜色

在Canvas中，我们可以使用以下方法来指定颜色：

fillStyle

fillStyle属性用于设置填充颜色，它可以是一个CSS颜色值，也可以是一个渐变对象或者一个图案对象。

// 设置填充颜色
ctx.fillStyle = "#ff0000";

// 填充矩形
ctx.fillRect(50, 50, 100, 100);

strokeStyle

strokeStyle属性用于设置描边颜色，它的取值与fillStyle相同。

// 设置描边颜色
ctx.strokeStyle = "#00ff00";

// 绘制矩形
ctx.strokeRect(50, 50, 100, 100);

指定透明度

在Canvas中，我们可以使用以下方法来指定透明度：

globalAlpha

globalAlpha属性用于设置绘图的透明度，它的取值范围为0.0（完全透明）～1.0（完全不透明）。

// 设置绘图透明度
ctx.globalAlpha = 0.5;

// 绘制矩形
ctx.fillRect(50, 50, 100, 100);

rgba()

我们还可以使用rgba()方法来指定颜色和透明度，其中a表示透明度，取值范围也是0.0～1.0。

// 指定颜色和透明度
ctx.fillStyle = "rgba(255, 0, 0, 0.5)";

// 填充矩形
ctx.fillRect(50, 50, 100, 100);

示例说明

下面是两个示例，一个是使用fillStyle指定颜色，另一个是使用rgba()指定颜色和透明度。

示例1

// 创建Canvas对象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 设置填充颜色
ctx.fillStyle = "#ff0000";

// 填充矩形
ctx.fillRect(50, 50, 100, 100);

以上代码会在Canvas对象中绘制一个填充颜色为红色的矩形。

示例2

// 创建Canvas对象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 指定颜色和透明度
ctx.fillStyle = "rgba(0, 0, 255, 0.5)";

// 填充矩形
ctx.fillRect(50, 50, 100, 100);

以上代码会在Canvas对象中绘制一个填充颜色为蓝色、透明度为0.5的矩形。

总之，我们可以通过这些方法来指定Canvas绘制时的颜色和透明度，以达到我们想要的效果。