html5画布支持带alpha的十六进制颜色吗

Does html5 canvas support hex colors with alpha?

本文关键字：alpha 十六进制 颜色 布支持 支持 html5      更新时间：2024-05-24

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

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

据我所知，十六进制的基本颜色是红色、绿色、蓝色，但看起来你可以有类似于rgba的格式，但类似于十六进制的argb，00是完全透明的，FF是实心的。

这是有道理的，因为在png中，当你可以有透明的像素时，阿尔法值也应该转换为十六进制，作为一个合法的和可操作的值。

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

这是合法的颜色#00000000吗？它将是看不见的，但却是黑色的，正如我所理解的纯黑：#FF000000；

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

画布和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>

您提到，您知道十六进制颜色可以分解为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)

您可以使用

ctx.fillStlye = "#rrggbbaa"

但它看起来像垃圾，我有一个问题，我称之为染色，如果我在一个颜色上涂上这个，它不会真正变成那个颜色，会有一种旧颜色的色调，这真的很烦人，因为我想让它完全变黑，但它不会。阿尔法越低，情况就越糟（我认为阿尔法只会叠加几次）你应该指示使用

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