我试图在 p5.js 中使用十六进制颜色值,但在使用它和同时使用 alpha 时遇到问题。我想用一个变量设置颜色,用另一个变量设置阿尔法。
let myColor = '#FF0000';
let myAlpha = 128;
function setup() {
createCanvas(200,200);
}
function draw() {
fill(color(myColor), myAlpha);
noStroke();
ellipse(100, 100, 50, 50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<html>
<head></head>
<body></body>
</html>
这适用于颜色,但 Alpha 最终为 255 (100%)。
setAlpha()
is 记录在 p5.Color 上 https://p5js.org/reference/#/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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)