캔버스에서 알파 값의 비율을 조정하는 방법은 무엇입니까?

Question

캔버스의 알파 값을 스케일하는 가장 좋은 방법은 무엇입니까?

내가 해결하려고하는 첫 번째 문제는 본질적인 낮은 알파 값을 가진 스프라이트를 그리는 것입니다. 나는 그것을 실제로 3-4 배 더 밝게하고 싶다. 현재 저는 같은 장소에서 4 번 그립니다. (이미지 파일을 편집 할 수없고 globalAlpha이 1 이상이되지 않습니다.)

두 번째 문제는 여러 개의 겹치는 스프라이트 경계를 그리는 것입니다. 스프라이트는 원형이지만 삐걱 거리는 소리가납니다. 나는 globalCompositeOperation = 'destination-out'과 결합 된 this method을 사용할 것이라고 생각했지만, 두 번째 그림의 알파 값을 최대화해야합니다.

Answer 1

을 마르크의 대답에 옵션으로 - 당신은 단순히 직접 알파 채널을 확장 할 수 있습니다 : (면책 조항 : 여기에 테스트되지 않은 코드를!).

전처리 단계의 일부로이 접근법을 권장하며, 버퍼를 반복 할 때마다 스프라이트를 사용해야 할 때마다 사용하지 않는 것이 상대적으로 느립니다.

/// get the image data and cache its pixel buffer and length 
var imageData = context.getImageData(x, y, width, height); 
var data = imageData.data; 
var length = data.length; 
var i = 0; 

var scale = 4; /// scale values 4 times. This may be a fractional value 

/// scale only alpha channel 
for(; i < length; i += 4) { 
    data[i + 3] *= scale; 
} 

context.putImageData(imageData, x, y); 

캔버스 인 Uint8ClampedArray에 좋은 것은 클램프를 사용하여 :

LIVE DEMO HERE

하면 이미 캔버스에 스프라이트를 가지고 자신의 위치를 ​​알고 가정 값을 반올림하여 상한 또는 하한을 확인하거나 정수로 변환 할 필요가 없습니다. 내부 코드는 모두 t입니다. 그의 은입니다.

Answer 2

rgb를 평평하게하여 rgb 색상을 밝게 한 다음 rgb 구성 요소 값을 늘릴 수 있습니다.

• 배경색을 적용하면서 rgba 값을 rgb로 변환하십시오.
• 빨강, 초록, 파랑 ​​값을 백분율로 늘려 색상을 밝게하십시오.

여기에 해당 할 수있는 기능입니다

function brighten(RGBA,bg,pct){ 

    // convert rgba to rgb 

    alpha = 1 - RGBA.alpha/255; 
    red = Math.round((RGBA.alpha*(RGBA.red/255)+(alpha*(bg.red/255)))*255); 
    green = Math.round((RGBA.alpha*(RGBA.green/255)+(alpha*(bg.green/255)))*255); 
    blue = Math.round((RGBA.alpha*(RGBA.blue/255)+(alpha*(bg.blue/255)))*255); 

    // brighten the flattened rgb by a percentage (100 will leave the rgb unaltered) 

    redBright=parseInt( Math.min(255,red*pct/100)); 
    greenBright=parseInt( Math.min(255,green*pct/100)); 
    blueBright=parseInt( Math.min(255,blue*pct/100)); 

    return({red:redBright,green:greenBright,blue:blueBright}); 

}