alpha透明填充或笔划样式可以与画布HTML5中的RGB分开设置吗？

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

我的例子是想要更改画布部分上方的填充样式或笔划样式，该画布部分的颜色是随机的或不再为人所知。有没有办法通过另一个属性或不向颜色传递任何内容来更改alpha（例如，ctx.fillStyle='rgba（，，，alphaValue）；）

有几种方法

首先，上下文的

globalAlpha

属性

正如您在标题中所要求的，它将允许独立于填充或笔划设置透明度

然后，您可以在某个点上使用

getImageData

查找颜色并保存该信息，使用

clearRect

清除该区域，设置

globalAlpha

，然后使用保存的颜色重新绘制该区域

当然，您根本不需要

globalAlpha

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

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

---

我画两个矩形，然后使它们之间的矩形区域更透明。

您可以使用函数从为感兴趣的样式设置的任何内容中提取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;
}