캔버스 globalCompositeOperation

기본적으로 개체(소스)가 Canvas에서 다른 개체(대상) 위에 그려지면 브라우저는 단순히 대상 개체의 이미지 위에 소스 개체의 이미지를 오버레이합니다.

쉽게 말하면 Canvas에서는 globalCompositeOperation 작업을 통해 이미지 소스와 대상 이미지를 결합하면 다음 그림과 같은 다양한 효과를 얻을 수 있습니다.

위 그림과 같이 빨간 사과와 검은색 원은 globalCompositeOperation 의 destination-out 통해 물린 빨간 사과로 변합니다. 즉, Canvas의 이미지 합성을 통해 스크래치 카드 복권 효과를 만드는 등 몇 가지 독특한 효과를 얻을 수 있습니다. 오늘은 Canvas에서 이미지 합성을 활용하는 방법을 배워보겠습니다.

Canvas에는 globalCompositeOperation 속성에 대한 값이 총 26 가지가 있는데, 각 유형마다 다른 효과가 나타나는 것을 볼 수 있으며, 일부 효과는 브라우저에서 정상적으로 렌더링되지 않을 수 있습니다. 하지만 상관없으니 간단히 이 26가지 유형의 의미와 효과를 이해해 보도록 하겠습니다.

 ctx.save(); ctx.translate(w/2, h/2); ctx.beginPath(); 2, 참) ctx.closePath();

위 코드는 여기서는 이미지 소스라고 불리는 캔버스 캔버스에 반경 80px 의 빨간색 원을 그립니다.

 ctx.fillStyle = 'orange'; ctx.arc(40, 20, 80, 0, Math.PI * 2, true) ctx.fill(); ();

이 코드는 캔버스 캔버스에 반경 80px 의 주황색 원을 그리며, 여기서는 이미지 대상이라고 합니다. 이미지 소스와 대상 이미지 사이에 globalCompositeOperation 값을 설정하면 이미지 합성 작업이 완료될 수 있습니다.

 ctx.save(); ctx.translate(w/2, h/2); ctx.beginPath(); 2, 참); ctx.closePath(); ctx.globalCompositeOperation = '소스-인'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, true); ();ctx.restore();

이때 얻은 효과는 다음과 같습니다.

source-over globalCompositeOperation 속성의 기본값입니다. 소스 그래픽이 대상 그래픽을 덮습니다. 소스 그래픽은 소스 그래픽의 불투명한 부분에 표시되고 대상 그래픽은 나머지 부분에 표시됩니다.

source-in : 대상 그래픽과 소스 그래픽에서 겹쳐서 불투명한 부분만 그려집니다.

source-out : 대상 그래픽과 소스 그래픽이 겹치지 않는 부분을 그립니다.

source-atop : 대상 그래픽과 소스 그래픽의 내용이 겹치는 부분에 대상 그래픽이 그려집니다.

destination-over : 대상 그래픽 및 소스 그래픽 콘텐츠 뒤의 대상 그래픽이 그려집니다.

destination-in : 대상 그래픽과 소스 그래픽이 겹치는 부분은 유지(소스 그래픽)하고 나머지는 투명하게 표시합니다.

나머지는 하나씩 표시되지 않습니다. 각 값에 해당하는 구체적인 설명은 여기에서 확인할 수 있습니다.

Canvas에는 이미지 합성 작업을 제어하기 위한 두 가지 속성 globalAlpha 및 globalCompositeOperation 이 있습니다.

• globalAlpha : 이미지의 투명도를 설정합니다. globalAlpha 속성의 기본값은 완전 불투명을 나타내는 1 이며 0 (완전 투명)에서 1 (완전 불투명)까지 설정할 수 있습니다. 그래프를 그리기 전에 이 값을 설정해야 합니다.
• globalCompositeOperation : 이 속성의 값은 globalAlpha 및 모든 변환이 적용된 후 현재 Canvas 비트맵의 그래픽 그리기를 제어합니다.

우리는 일상생활에서 복권과 같은 복권 효과를 자주 보게 됩니다. 이를 위해 Canvas를 사용하는 경우 Canvas 이미지 합성을 사용합니다.

 <div id=card> <canvas id=canvasOne width=500 height=300></canvas> </div>

상품(이미지인 경우)을 div#card 의 배경으로 표시합니다. 그런 다음 먼저 Canvas에 회색 직사각형(소스 이미지)을 그린 다음 마우스 이벤트(또는 터치 이벤트)를 통해 새 이미지를 동적으로 그리고(브러시와 유사) globalCompositeOperation 속성 값을 destination-out (new)으로 설정합니다. draw 그래픽의 겹치지 않는 부분과 대상 캔버스에 이미 존재하는 그래픽 콘텐츠는 유지됩니다. 브러시 지우기가 일정 비율보다 클 경우 <canvas> 요소를 삭제하거나 clearRect() 사용하여 캔버스 캔버스를 지웁니다. div 배경을 표시하려면

이 기사에서는 Canvas의 이미지 합성을 주로 소개합니다. Canvas에서는 globalAlpha와 globalCompositeOperation이라는 두 가지 속성을 통해 이미지 합성 작업을 제어하여 이미지 합성 효과를 얻을 수 있습니다. 모든 사람의 학습에 도움이 되기를 바라며, 또한 모든 사람이 VeVb Wulin Network를 지지해 주기를 바랍니다.