Javascript - Canvas - 이전에 채워진 색상의 투명 PNG를 오버레이합니다.

Question

캔버스에 사각형을 그으면 단색으로 채 웁니다. 투명 PNG로 다시 채울 수 있나요? 그래도 배경에서 원래 색상을 볼 수 있습니까?

뭔가 같은, 더미 코드 -

ctx.beginPath(); 
    ctx.lineTo(//draw a rectangle) 
    ctx.fillStyle = "#FF0000" 
    ctx.fill(); 
    var imageObj = new Image(); 
    function drawPattern() { 
     var pattern = ctx.createPattern(imageObj, "repeat"); 
     ctx.fillStyle = pattern; 
     ctx.fill(); 
    } 
    imageObj.onload = drawPattern; 
    imageObj.src = "images/dot.png"; //transparent png 

나는 유사한 접근 방법을 시도하고 그것은 작동하지 않습니다.

다른 방법이 있습니까? 내가 놓친 게 있니?

Answer 1

잘하면 효과가 있습니다. 진정으로 투명한 PNG가 있는지 확인하십시오.

여기에 코드의 작업 예제 :

http://jsfiddle.net/BDXc7/