Question

如何在fabric.js中以十六进制格式获取画布的背景颜色？当我使用canvas.backgroundColor时，它以rgb格式返回对象和颜色。

Answer 1

可以轻松地从任何css格式转换为十六进制：使用虚拟context2d，设置其fillStyle，然后再次阅读：它现在是十六进制！：

function convertToHex(nonHexColorString) {
  var ctx = document.createElement('canvas').getContext('2d');
  ctx.fillStyle = nonHexColorString;
  return ctx.fillStyle;
}

console.log(convertToHex('rgb(0,0,0)'); // -->> output is #000000

如果速度很重要，请

缓存context2d：

function convertToHex(nonHexColorString) {  
  var ctx  = convertToHex.dummyContext2d;
  if (!ctx) {
      ctx = convertToHex.dummyContext2d = document.createElement('canvas').getContext('2d');
  }
  ctx.fillStyle = nonHexColorString;
  return ctx.fillStyle;
}

Answer 2

如果你想留在fabricjs域，你可以这样做：

var color = new fabric.Color(nonHexString);

...然后

color.toRgb();
color.getAlpha();
color.toHsl();
color.toHex();

等等。

http://fabricjs.com/docs/fabric.Color.html

以十六进制格式获取画布的背景颜色

2 个答案: