p5 16進数の文字列とアルファを使用して塗りつぶしの色を設定します

p5.jsの色に16進値を使用しようとしていますが、これを使用して同時にアルファを使用する際に問題があります。 1つの変数で色を設定し、別の変数で色を設定したいと思います。p5 16進数の文字列とアルファを使用して塗りつぶしの色を設定します

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>

これは色のために働くが、アルファは、255（100％）となってしまいます。 the referenceから

出典

2017-11-10 Kevin K

これは、アルファが0〜255である可能性は極めて低いです。理由はありません。 floatを試す0.5 – Radio

将来的には実行できる[MCVE]（https://stackoverflow.com/help/mcve）を投稿してください。 P5.jsの場合、これは接続されていないコードスニペットの代わりに 'setup（）'と 'draw（）'関数を含むことを意味します。 –

ケビン - 私は質問を投稿してからしばらくしています。ありがとうございました。ラジオ、p5のアルファは0〜255の数字です。 –

実際、私はそれを理解しました。 p5にはカラーオブジェクトがあります。アルファはcolor._array [3]のカラーオブジェクトの内部に格納されます。最初に文字列を使用してカラーオブジェクトを作成します。次に、color._array [3]の値を変更してalphaを変更し、そのカラーオブジェクトをfill（）メソッドに渡します。

注：通常、アルファをp5の0〜255の数値として定義しますが、カラーオブジェクトはアルファを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>

出典

2017-11-11 09:57:32

：

単一の文字列引数は、RGB、RGBAと六角CSS色文字列を提供され、すべての名前付きカラー文字列がサポートされている場合。この場合、第2引数としてのアルファ値の値はサポートされていないので、RGBA形式を使用する必要があります。

つまり、文字列のカラーコードでアルファ値を使用することはできません。

RGBA stringを使用するか、値を個々の数値に分割し、4-arg fill()機能を使用する必要があります。

サイドノート：今後は、私たちが実行できるMCVEを投稿してください。 P5.jsの場合、これはコードの切断されたスニペットの代わりにsetup()とdraw()関数を含むことを意味します。

出典

2017-11-10 18:27:05

p5 16進数の文字列とアルファを使用して塗りつぶしの色を設定します

答えて

関連する問題