javascript - 자바 - 캔버스 프로그램
<canvas>의 fillStyle에서 RGBa 값을 프로그래밍 방식으로 사용합니까? (3)
<canvas>
사용하여 변수를 사용하여 사각형의 RGBa 값을 설정하려고합니다.
예 :
ctx.fillStyle = "rgba(32, 45, 21, 0.3)";
잘 작동하지만 변수와 함께 사용 :
var r_a = 0.3;
ctx.fillStyle = "rgba(32, 45, 21, r_a)";
작동하지 않습니다.
분명히 fillStyle
은 문자열 만 허용합니다. 그렇다면 값을 명시 적으로 정의하는 대신 변수를 사용하여 rgba 값의 값을 설정하는 방법은 무엇입니까?
나는 비슷한 것을 찾고 있었고 게시물을 읽었습니다. 그것을 읽은 후에 나 자신을위한 해결책을 생각해 냈습니다. 저는 오디오 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
나는 파티에 매우 늦었지만 비슷한 문제가있어 유용 할 수있는 약간 다른 방식으로 해결했습니다.
채우기 색상을 다른 알파 레벨에서 재사용해야하므로 JavaScript 대체 메서드를 사용했습니다.
colurfill = "rgba(255, 255, 0, [[opacity]])";
ctx.fillStyle = colurfill.replace("[[opacity]]", "0.5");
:
:
ctx.fillStyle = colurfill.replace("[[opacity]]", "0.75");
물론 알파 레벨이 다를 필요는 없으며 다른 채널 중 하나 일 수 있습니다.
ctx.fillStyle = "rgba(32, 45, 21, "+r_a+")";
문자열 연결입니다.