工作示例：

Question

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

这就像绘制一个带有黑色像素的正方形，然后绘制一个带有透明像素的圆圈。

据我所知，十六进制颜色基本为红色，绿色，蓝色，但看起来您的格式与rgba类似，但与argb的十六进制格式相同，00完全透明并且FF是稳固的。

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

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

这是一种合法的颜色#00000000吗？它将是隐形但黑色的 - 因为我会理解为纯黑色：#FF000000;

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

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

Answer 2

你提到你知道六角颜色可以分解为r，g，b。你能做的一件事就是编写一个允许你使用8-char十六进制代码的函数：

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)

Answer 3

您可以使用

ctx.fillStlye = "#rrggbbaa"

但是它看起来像胡扯，我有这个问题，我称之为染色，如果我在颜色上加上一点色彩，它将不会自动转变为该色彩，并且会具有旧色彩和我想要的真正令人讨厌的BC它褪色全黑，但不会。越差的alpha越差（我认为alpha只会叠加几次）您应该使用

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

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

3 个答案:

工作示例：