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

Question

我在想如果一个正方形可以用彩色画 #FF000000 然后在 #00000000 里面画一个圆？

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

据我所知，十六进制颜色基本是红色、绿色、蓝色，但看起来您可以使用与 rgba 类似的格式，但像 argb 的十六进制格式 00 是完全透明，FF 坚固。

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

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

这是合法的颜色吗#00000000？它将是看不见的但黑色的地方 - 正如我所理解的纯黑色：#FF000000;

Answer 1

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

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 字符十六进制代码的函数：

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 的十六进制颜色？

Does html5 canvas support hex colors with alpha?

javascript

hex

canvas

工作示例：