John
Verwenden <canvas>ich möchte den RGBa-Wert des Rechtecks mithilfe einer Variablen festlegen.
zum Beispiel:
ctx.fillStyle = "rgba(32, 45, 21, 0.3)";
funktioniert gut, aber mit einer Variablen:
var r_a = 0.3;
ctx.fillStyle = "rgba(32, 45, 21, r_a)";
funktioniert nicht.
Offenbar fillStyle akzeptiert nur einen String. Wie setze ich also einen Wert des rgba-Werts mithilfe einer Variablen, anstatt die Werte explizit zu definieren?
Sie müssen nur die verketten r_a Variable, um die Zeichenfolge korrekt zu erstellen:
var r_a = 0.3;
ctx.fillStyle = "rgba(32, 45, 21, " + r_a + ")";
Sie könnten auch neue HTML-Vorlagenzeichenfolgen verwenden: cts.fillStyle = `rgba(32, 45, 21, ${r_a})`;. Dies ermöglicht eine Interpolation, wie Sie es anscheinend versucht haben.
– trysis
11. August 2015 um 18:07 Uhr
ctx.fillStyle = "rgba(32, 45, 21, "+r_a+")";
Es ist eine Zeichenfolgenverkettung.
Ich bin sehr spät zur Party, aber ich hatte ein ähnliches Problem und habe es auf eine etwas andere Weise gelöst, die nützlich sein kann.
Da ich die Füllfarben auf verschiedenen Alpha-Ebenen wiederverwenden musste, habe ich die JavaScript-Ersetzungsmethode verwendet:
colurfill = "rgba(255, 255, 0, [[opacity]])";
ctx.fillStyle = colurfill.replace("[[opacity]]", "0.5");
:
:
ctx.fillStyle = colurfill.replace("[[opacity]]", "0.75");
Offensichtlich muss es nicht der Alpha-Pegel sein, der variiert, es könnte auch einer der anderen Kanäle sein.
als kleine Änderung dazu (mit charset = UTF-8), color = “rgba(255, 255, 0, α)”; color.replace(“α”, 0.5); // kann hier eine Zahl verwenden
– QuentinUK
24. Februar 2013 um 2:34 Uhr
var r_a = 0.3
ctx.fillStyle = `rgba(32, 45, 21, ${r_a})`;
Diese werden Template-Literale genannt
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Die Backticks “ finden sich auf US-Tastaturen oft links von der Zahl 1 auf der Tastatur.
Ich habe nach etwas Ähnlichem gesucht und bin auf Ihren Beitrag gestoßen, nachdem ich ihn gelesen hatte, kam ich auf eine Lösung für mich, ich arbeite mit der Audio-API und wollte eine dynamische Farbe basierend auf einer Variablen, die von der Frequenz in der Sounddatei stammt . Folgendes habe ich mir ausgedacht und es funktioniert vorerst. Ich dachte, ich würde es posten, falls es hilft, da ich mich von Ihrer Frage inspirieren ließ:
function frameLooper(){
window.requestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Clear the canvas
bars = 100;
for (var i = 0; i < bars; i++) {
bar_x = i * 3;
bar_width = 2;
bar_height = -(fbc_array[i] / 2);
bar_color = i * 3;
//fillRect( x, y, width, height )
// Explanation of the parameters below
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
ctx.fillStyle = "rgb(100," + bar_color + "," + bar_color + ")" ;
// Color of the bars
“Ich verstoße hier gegen irgendwelche Regeln oder Richtlinien, dann lass es mich bitte freundlich wissen und ich werde es für das nächste Mal berücksichtigen …” Das Einzige, was du lernen solltest, ist, dass es höflich ist, eine Antwort zu akzeptieren, wenn jemand die Antwort gegeben hat das brauchst du. Links neben jeder Antwort, unter der Partitur, sollten Sie ein großes Fragezeichen sehen. Wenn Sie darauf klicken, wird diese Antwort als akzeptiert markiert, was sowohl Ihnen als auch der Person, die die Frage beantwortet, einen kleinen Reputationsbonus verschafft.
– Brian Campell
24. Dezember 2009 um 17:35 Uhr
Heiligabend 2009. Ihre Frage wurde innerhalb einer Stunde beantwortet. 2016 hast du immer noch nicht zugesagt. Muss eine große Weihnachtsfeier gewesen sein!
– Steward
18. Oktober 2016 um 22:14 Uhr