프로그래밍 방식으로 <canvas>에서 fillStyle의 RGBa 값을 사용합니까?

<canvas>을 사용하여 변수를 사용하여 사각형의 RGBa 값을 설정하고 싶습니다. 예를 들어프로그래밍 방식으로 <canvas>에서 fillStyle의 RGBa 값을 사용합니까?

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

잘 작동하지만, 변수를 사용하여 :

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

이 작동하지 않습니다.

분명히 fillStyle은 문자열 만 허용합니다. 그렇다면 값을 명시 적으로 정의하는 대신 변수를 사용하여 rgba 값의 값을 설정하는 방법은 무엇입니까?

출처

2009-12-24 John

"나는 다음 주시기 바랍니다 여기에 어떤 규칙이나적인 지침을 위반 해요 : 여기에 내가 무엇을 최대 온 그리고 그것은 지금은 중국식 팬, 나는 당신의 질문에서 영감을 얻었다 이후 도움이 케이스에 게시 줄 알았는데 나를 부드럽게 알고 다음 번에 그 사실을 명심하십시오 ... "배울 점은 누군가가 필요한 답을 제공하면 대답을 받아들이는 것이 예의라는 것입니다. 각 답의 왼쪽에있는 점수 아래에 큰 물음표가 나타납니다. 이 버튼을 클릭하면 해당 답변이 수락 된 것으로 표시되어 귀하와 귀하의 질문에 답변하는 사람 모두에게 평판 보너스를줍니다. –

Xmas eve 2009. 한 시간 내에 질문에 대한 답변을 얻었습니다. 2016 년에 당신은 여전히 받아들이지 않았습니다. 큰 크리스마스 파티 였어 야 했어! – Stewart

당신은 제대로 문자열을 구축하기 위해 r_a 변수을 연결해야합니다

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

출처

2009-12-24 08:22:56 CMS

새로운 HTML 템플리트 문자열을 사용할 수도 있습니다 :'cts.fillStyle = \'rgba (32, 45, 21, $ {r_a}) \';'. 이렇게하면 보간이 가능해지며, 이는 보였던 것처럼 보입니다. – trysis

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

그것은 문자열 연결입니다.

출처

2009-12-24 08:23:27

나는 파티에 매우 늦었지만 비슷한 문제가있어 유용 할 수있는 약간 다른 방식으로 해결했습니다. 분명히

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

이 다릅니다 알파 수준 일 필요는 없으며, 그 중 하나가 될 수있다 : 나는 다른 알파 수준에서 채우기 색상을 재사용하는 데 필요한 때문에

, 나는 방법은 대체 자바 스크립트를 사용 다른 채널들.

출처

2012-03-28 20:37:24

약간의 변경 (charset = UTF-8 포함), color = "rgba (255, 255, 0, α)"; colour.replace ("α", 0.5); // 여기에 숫자를 사용할 수 있습니다. – QuentinUK

나는 비슷한 것을 찾고 귀하의 게시물을 쳐다 보았습니다. 그것을 읽은 후에, 나 자신을위한 해결책을 생각해 냈습니다. 저는 오디오 API로 작업 중이며 주파수에서 오는 변수를 기반으로하는 동적 인 색상을 원했습니다. 사운드 파일에.

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

출처

2014-12-19 05:26:43 Huc

프로그래밍 방식으로 <canvas>에서 fillStyle의 RGBa 값을 사용합니까?

답변

관련 문제