<canvas> में fillStyle में प्रोग्रामेटिक रूप से RGBa मानों का उपयोग करें?

Question

<canvas> का उपयोग करके, मैं एक चर का उपयोग कर आयत के आरजीबीए मान को सेट करना चाहता हूं।

उदाहरण के लिए

:

ctx.fillStyle = "rgba(32, 45, 21, 0.3)"; 

ठीक काम करता है, लेकिन एक चर के साथ इसे का उपयोग:

var r_a = 0.3; 
ctx.fillStyle = "rgba(32, 45, 21, r_a)"; 

काम नहीं करता।

जाहिर है fillStyle केवल एक स्ट्रिंग स्वीकार करता है। तो मैं मूल्यों को स्पष्ट रूप से परिभाषित करने के बजाय कुछ चर का उपयोग कर आरजीबीए मूल्य का मूल्य कैसे निर्धारित करूं?

Answer 1

तुम बस r_a चर श्रेणीबद्ध करने के लिए स्ट्रिंग सही ढंग से निर्माण करने के लिए की जरूरत है:

var r_a = 0.3; 
ctx.fillStyle = "rgba(32, 45, 21, " + r_a + ")"; 

Answer 2

ctx.fillStyle = "rgba(32, 45, 21, "+r_a+")"; 

यह स्ट्रिंग संयोजन है।

Answer 3

मैं पार्टी के लिए बहुत देर हो चुकी हूं लेकिन मुझे एक ही समस्या थी और इसे थोड़ा अलग तरीके से हल किया गया जो उपयोगी हो सकता है।

जब से मैं अलग अल्फा स्तरों पर भरने के रंग का पुन: उपयोग करने के लिए आवश्यक है, मैं जावास्क्रिप्ट इस्तेमाल किया की जगह विधि:

colurfill = "rgba(255, 255, 0, [[opacity]])"; 
ctx.fillStyle = colurfill.replace("[[opacity]]", "0.5"); 
: 
: 
ctx.fillStyle = colurfill.replace("[[opacity]]", "0.75"); 

जाहिर है यह अल्फा स्तर है कि बदलता होना जरूरी नहीं है, यह में से एक हो सकता है अन्य चैनल

Answer 4

मैं कुछ ऐसा ढूंढ रहा था और इसे पढ़ने के बाद आपकी पोस्ट में भाग गया, मैं अपने लिए एक समाधान के साथ आया, मैं ऑडियो एपीआई के साथ काम कर रहा हूं और आवृत्ति से आने वाले चर पर आधारित गतिशील रंग चाहता था ध्वनि फ़ाइल में। यहाँ है कि मैं क्या के साथ आया है और यह अब के लिए woks, सोचा था कि मैं मामले में यह पोस्ट होता यह मदद करता है के बाद से मैं अपने प्रश्न से प्रेरणा मिली:

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