html5 canvas是否支持带alpha的十六进制颜色？

Question

我想知道如果一个正方形可以用彩色绘制,#FF000000然后是一个圆圈#00000000？

这将是绘制一个带有黑色像素的正方形,然后绘制一个带有透明像素的圆圈.

据我所知,十六进制颜色基本是红色,绿色,蓝色,但看起来你可以有类似的格式,rgba但像argb十六进制一样,00完全透明且FF坚固.

它在png中是有意义的,当你可以有透明像素时,alpha值也应该转换为十六进制作为合法和操纵值.

有8个字符的十六进制颜色看起来并不标准(通常是6长)因为我今天在Android应用程序上第一次看到它们并且想知道它们是否(想要更好的措辞 - 请编辑,如果不清楚)合法.

这是一种合法的颜色#00000000吗？这将是无形的,但在那里的黑色,因为这是我的理解纯黑色:#FF000000;

Answer 1

与CSS一样,Canvas不支持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>

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