在Canvas HTML5中，Alpha透明度的填充或描边样式是否可以与RGB分开设置？

Question

在Canvas/HTML5中，我知道您可以使用RGBA设置fillStyle或strokeStyle的颜色和alpha透明度。 您还可以仅使用RGB设置没有alpha通道的颜色。 是否有一种方法可以更改项目的alpha值而不必提供颜色。

我的例子是希望更改填充样式或画笔样式在一个颜色随机或不再知道的画布部分之上。 有没有通过另一个属性或通过传递颜色为空来更改alpha的方法（例如ctx.fillStyle ='rgba(,,,alphaValue)';）？

- InfiniteMonkeys

Answer 1

有几种方法。

首先，使用上下文的globalAlpha属性。

正如您在标题中提出的那样，它将允许独立于填充或描边设置透明度。

然后，您可以在点上使用getImageData查找颜色并保存该信息，使用clearRect清除该区域，设置globalAlpha，然后使用保存的颜色重新绘制该区域。

当然，您根本不需要globalAlpha。您也可以执行上述操作，而不是设置全局alpha，只需修改保存的颜色的alpha。

如果要使画布的大型复杂区域更透明，则需要更改globalAlpha，然后使用drawImage将画布绘制到自身上。

这里是一个例子。我绘制了两个矩形，然后使它们之间的矩形区域更加透明。

- Simon Sarris

Answer 2

您可以使用一个函数从您感兴趣的样式中提取RGB值，然后使用所需的alpha设置它：

var rgb = hexToRgb(canvasCtx.fillStyle);
canvasCtx.fillStyle = "rgba(" + rgb["r"] + "," +rgb["g"] + "," + rgb["b"] + ",0.2)";

您可以使用像这个 hexToRgb 函数一样的函数，该函数取自另一个答案：

function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

- palako