Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

HTML5 Canvas의 구성이란 무엇입니까?

<시간/>

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>