Html5 캔버스 오버레이

Question

오버레이 컬러의 비트 맵을 캔버스로 그릴 수있는 좋은 방법이 있습니까?

투명 픽셀이 아닌 모든 픽셀에 대해 고유 한 색상으로 비트 맵을 그립니다. 그 해결책이 없기 때문에 나에게 도움이 될 수 있습니다! 그것을 할 수

감사의

Answer 1

Live Demo

한 가지 방법은 각 픽셀을 통해 루프하고 당신이 그것을 원하는 값으로 R/G/B 값을 변경합니다. 알파 값을 건너 뛰면 불투명 픽셀을 원하는 색상으로 만 변경합니다.

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    image = document.getElementById("testImage"); 

ctx.drawImage(image,0,0); 

var imgd = ctx.getImageData(0, 0, 128, 128), 
    pix = imgd.data, 
    uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything. 

// Loops through all of the pixels and modifies the components. 
for (var i = 0, n = pix.length; i <n; i += 4) { 
     pix[i] = uniqueColor[0]; // Red component 
     pix[i+1] = uniqueColor[1]; // Green component 
     pix[i+2] = uniqueColor[2]; // Blue component 
     //pix[i+3] is the transparency. 
} 

ctx.putImageData(imgd, 0, 0); 

// Just extra if you wanted to display within an img tag. 
var savedImageData = document.getElementById("imageData"); 
savedImageData.src = canvas.toDataURL("image/png");