Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

HTML5キャンバスの構成属性？

HTML5キャンバスは合成属性を提供します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>

  1. HTML5でキャンバスを中央に配置する方法は？

    HTML 5でキャンバスを中央に配置するには、divタグにcanvasタグを含めます。次に、divタグを中央揃えにします。そうすることで、キャンバスも中央揃えになります。 例 <!DOCTYPE html>. <html>    <body>       <div style = "text-align:center;">          <canvas style = "background-color:GR

  2. HTML<canvas>幅属性

    要素のwidth属性は、キャンバスの幅をピクセル単位で設定するために使用されます。以下は構文です- <canvas width="pixels_val"> 上記のpixels_valは、ピクセル単位で設定された幅です。 要素-のwidth属性を実装する例を見てみましょう。 例 <!DOCTYPE html> <html> <body> <canvas id="newCanvas" width="400" height="200" style="bor