【问题标题】：Does html5 canvas support hex colors with alpha?html5 画布是否支持带 alpha 的十六进制颜色？
【发布时间】：2015-02-25 00:05:16
【问题描述】：

我想知道是否可以用颜色#FF000000 绘制一个正方形，然后在#00000000 内绘制一个圆圈？

这就像用黑色像素画一个正方形，然后用透明像素画一个圆圈。

据我了解，十六进制颜色基本是红色、绿色、蓝色，但看起来您可以使用与 rgba 类似的格式，但就像十六进制的 argb 一样，00 是完全透明的，FF 是纯色的.

就像在 png 中一样，当您可以拥有透明像素时，alpha 值也应该转换为 hex 作为合法和可操作的值。

8 个字符的十六进制颜色似乎根本不标准（通常为 6 长），因为我今天在一个 android 应用程序上第一次看到它们并且想知道它们是否是标准的（需要更好的措辞 - 如果不清楚，请编辑）合法。

这是#00000000 的合法颜色吗？它是不可见的，但是是黑色的——据我所知，这将是纯黑色：#FF000000;

【问题讨论】：

标签： javascript canvas hex

【解决方案1】：

更新：现代浏览器现在支持 8 个字符的十六进制颜色，用于 CSS 和画布。

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

工作示例：

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);

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

【讨论】：

大多数最新浏览器中的 CSS 都支持 8 个字符的十六进制颜色，例如：#00000080

【解决方案2】：

您提到您知道十六进制颜色可以分解为 r,g,b。您可以做的一件事是编写一个允许您使用 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)

【讨论】：

谢谢，我总是这样。

【解决方案3】：

你可以使用

ctx.fillStlye = "#rrggbbaa"

但它看起来像废话，我有这个问题，我称之为染色它会完全变黑，但不会。它变得更糟，降低了阿尔法（我认为阿尔法只会堆叠几次）你应该使用

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

【讨论】：