제한된 수의 이미지에 globalCompositeOperation 사용

Question

매우 제한된 수의 이미지에만 globalCompositeOperation을 사용할 수 있습니까?

예를 들어 나는 캔버스에 많은 것을 그려 넣습니다. 그리고 모든 것의 맨 위에는 무관하게 완성 된 두 개의 이미지에 대해 몇 가지 작업을 수행하고 싶습니다. (두 이미지가 아니라 결과를 표시하고 싶습니다.) 어떻게 할 수 있습니까?

지금은 이러한 작업을 수행하면 이미 아래에 그려져있는 모든 작업에 영향을 미칩니다.

그래서 내가 찾은 해결책은 다른 캔버스에서 작업을 수행하는 것입니다.이 캔버스를 메인 캔버스의 첫 번째 캔버스 위에 표시합니다. 그러나 이것은 나 빠진다. 첫째, 그것은 공연을 치게된다. 그렇다면 직관적이지 않습니다. 그리고 마지막으로, 레이어에 대한 제어력이 느슨합니다 : 두 번째 캔버스에있는 것이 무엇이든 항상 첫 번째 캔버스 위에 놓입니다.

이것은 매우 단순한 기능처럼 보입니다. 나는 단지 인터넷 검색에서 나빠질 것을 희망합니다!

고맙습니다.

Answer 1

오프 스크린 캔버스를 만들어 작업 공간으로 사용하십시오. 저장할 RAM이있는 한 많은 것을 만들 수 있습니다.

는 오프 스크린 캔버스와 쉬운

function createCanvas(w,h){ 
     var canvas = document.createElement("canvas"); 
     canvas.width = w; 
     canvas.height = h; 
     canvas.ctx = ctx.getContext("2d"); 
     return canvas; 
} 

를 만들려면 다음은 이미지로 취급합니다. 다른 캔버스에 그릴 때

var offScreenCan = createCanvas(1024,1024); 
offScreenCan.ctx.drawImage(myImage); // put something on the canvas 
ctx.drawImage(offScreenCan,0,0); // draw that canvas to another 

캔버스를 포함하는 객체에 캔버스를 래핑하지 않고 캔버스에 컨텍스트를 첨부합니다. 저는 캔버스가 성능에 영향을 미칠까 걱정 했었습니다. 이제는 모든 이미지를로드하는 즉시 이미지를 캔버스로 변환하고 성능에 전혀 영향을 미치지 않습니다.