HTML5 캔버스는 모든 그리기 작업에 영향을 미치는 합성 속성 globalCompositeOperation을 제공합니다.
예시
기존 모양 뒤에 새로운 모양을 그리고 특정 영역을 가리고 아래 예제와 같이 globalCompositeOperation 속성을 사용하여 캔버스에서 섹션을 지울 수 있습니다.
<!DOCTYPE HTML> <html> <head> <script> var compositeTypes = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out', 'destination-atop','lighter','darker','copy','xor' ]; function drawShape(){ for (i=0;i<compositeTypes.length;i++){ var label = document.createTextNode(compositeTypes[i]); document.getElementById('lab'+i).appendChild(label); var ctx = document.getElementById('tut'+i).getContext('2d'); // draw rectangle ctx.fillStyle = "#FF3366"; ctx.fillRect(15,15,70,70); // set composite property ctx.globalCompositeOperation = compositeTypes[i]; // draw circle ctx.fillStyle = "#0066FF"; ctx.beginPath(); ctx.arc(75,75,35,0,Math.PI*2,true); ctx.fill(); } } </script> </head> <body onload="drawShape();"> <table border="1" align="center"> <tr> <td><canvas id="tut0" width="125" height="125"></canvas><br/> <label id="lab0"></label> </td> <td><canvas id="tut1" width="125" height="125"></canvas><br/> <label id="lab1"></label> </td> <td><canvas id="tut2" width="125" height="125"></canvas><br/> <label id="lab2"></label> </td> </tr> <tr> <td><canvas id="tut3" width="125" height="125"></canvas><br/> <label id="lab3"></label> </td> <td><canvas id="tut4" width="125" height="125"></canvas><br/> <label id="lab4"></label> </td> <td><canvas id="tut5" width="125" height="125"></canvas><br/> <label id="lab5"></label> </td> </tr> <tr> <td><canvas id="tut6" width="125" height="125"></canvas><br/> <label id="lab6"></label> </td> <td><canvas id="tut7" width="125" height="125"></canvas><br/> <label id="lab7"></label> </td> <td><canvas id="tut8" width="125" height="125"></canvas><br/> <label id="lab8"></label> </td> </tr> <tr> <td><canvas id="tut9" width="125" height="125"></canvas><br/> <label id="lab9"></label> </td> <td><canvas id="tut10" width="125" height="125"></canvas><br/> <label id="lab10"></label> </td> <td><canvas id="tut11" width="125" height="125"></canvas><br/> <label id="lab11"></label> </td> </tr> </table> </body> </html>