Question

我正在尝试对p5.js中的颜色使用十六进制值，而我在使用它和同时使用alpha时遇到了麻烦。我想用一个变量设置颜色，用另一个变量设置alpha。

A-C-D-B

let myColor = '#FF0000';
let myAlpha = 128;
function setup() {
  createCanvas(200,200);
}
function draw() {
  fill(color(myColor), myAlpha);
  noStroke();
  ellipse(100, 100, 50, 50);
}

这适用于颜色，但alpha最终为255（100％）。

Answer 1

来自the reference：

如果提供单个字符串参数，则支持RGB，RGBA和Hex CSS颜色字符串以及所有命名颜色字符串。在这种情况下，不支持使用alpha数值作为第二个参数，应使用RGBA表单。

换句话说，您不能将字符串颜色代码用于alpha值。

您必须使用RGBA string或将值拆分为各自的数字值，并使用4-arg 500x688函数。

附注：将来，请发布我们可以投放的MCVE。对于P5.js，这意味着包含fill()和setup()函数，而不是断开连接的代码片段。

Answer 2

实际上，我想通了。 p5有一个颜色对象。 alpha存储在color._array [3]中的颜色对象内。首先使用字符串创建颜色对象。然后，您可以通过更改color._array [3]中的值来更改alpha，然后将该颜色对象传递给fill（）方法。

注意：尽管您通常将alpha定义为p5中0-255之间的数字，但颜色对象将alpha存储为此处0到1之间的数字。

let myColor = '#FF0000';
let myAlpha = 128;
function setup() {
  createCanvas(200,200);
}
function draw() {
  background(255);
  let c = color(myColor);
  c._array[3] = myAlpha / 255;
  fill(c);
  noStroke();
  ellipse(100, 100, 50, 50);
  ellipse(110, 110, 50, 50);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<html>
  <head></head>
  <body></body>
</html>

Answer 3

setAlpha()是documented on p5.Color，其值从0到255。

输入您的代码

let c = color(myColor);
c.setAlpha(myAlpha);
fill(c);

function setup(){
  createCanvas(300,300);
}

var alphaValue = 50;

function draw(){
  var c = color('#FF0000');
  fill(c);
  rect(100,100,100,100);
  c = color('#0000FF');
  c.setAlpha(alphaValue);
  fill(c);
  rect(150,150,100,100);
}

function mouseClicked(){
    if (alphaValue > 50){
	    alphaValue = 50;
	} else {
	    alphaValue = 255;
	}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

Answer 4

要将alpha值合并到十六进制颜色表示中，只需在颜色代码的末尾添加两个数字即可。范围是0-255，但以十六进制表示的将是00-FF。例如：纯红色为'#FF0000FF'。请参阅下面的更多示例。

function setup(){
  createCanvas(300,300);
}


function draw(){
  fill('#FF0000FF');
  rect(50,50,100,100);
  fill('#00FF0040');
  rect(75,75,100,100);
  fill('#0000FF80');
  rect(100,25,100,100);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

p5使用十六进制字符串和alpha设置填充颜色

4 个答案: