HTML5画布支持带有透明度的十六进制颜色吗？

Question

我在想，是否可以用颜色#FF000000绘制一个正方形，然后在其中绘制一个透明像素的圆形？

这就像是用黑色像素绘制一个正方形，然后用透明像素覆盖一个圆形。

我了解十六进制颜色基本上由红色、绿色和蓝色组成，但看起来你也可以使用类似于rgba的格式，但是使用argb的十六进制表示法，其中00代表完全透明，FF代表不透明。

这是有道理的，因为在png中，你可以有透明像素，所以alpha值也应该被转换为十六进制作为合法的可操作值。

然而，具有8个字符的十六进制颜色似乎并不标准（通常为6个字符），因为我今天在一个安卓应用程序中第一次看到它们，并且想知道它们是否合法。

这是一种合法的颜色#00000000吗？它将是看不见的，但是黑色的，而这将是我理解的纯黑色：#FF000000；

- Ben Muircroft

Answer 1

更新：现代浏览器已支持CSS和canvas中的8字符十六进制颜色。

---

Canvas和CSS一样，不支持8字符十六进制颜色。但是，您可以使用rgba颜色语法。

工作示例：

var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');

ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 100, 100);

ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fillRect(50, 50, 100, 100);

<canvas id="canvas"></canvas>

- Alexander O'Mara

---

大多数最新的浏览器中，CSS确实支持8个字符的十六进制颜色，例如：＃00000080。 - Intervalia

Answer 2

你提到了十六进制颜色可以拆分成红、绿、蓝三个部分。其中一件事情是编写一个函数，让你能够使用8位字符的十六进制代码：

function hex2rgba(hexa){
  var r = parseInt(hexa.slice(1,3), 16);
      g = parseInt(hexa.slice(3,5), 16);
      b = parseInt(hexa.slice(5,7), 16);
      a = parseInt(hexa.slice(7,9), 16)/255;
  return 'rgba('+r+', '+g+', '+b+', '+a+')';
}

ctx.fillStyle = hex2rgba('#aabbcc99');
//rgba(170, 187, 204, 0.59765625)

- AJFarkas

---

谢谢，那总是让我困惑。 - AJFarkas

Answer 3

你可以使用

ctx.fillStyle = "#rrggbbaa"

但它看起来很糟糕，我有一个称之为“染色”的问题，如果我在颜色上涂上这个色调，它实际上不会变成那种颜色，而是会保留旧颜色的色调，这真的很烦人，因为我想要它完全褪黑，但它不会。当 alpha 值越低时情况会变得更糟（我认为 alpha 值只能叠加几次），你应该使用

ctx.globalAlpha = 0.aa; //aa is in base 10 here! (its a scale from 1.0 to 0.0)

- mse