HTML5 Canvas-パターンと影

パターンを作成

キャンバスにパターンを作成するために必要な次の方法があります-

Sr.No.	Method and Description
1	createPattern(image, repetition) このメソッドは、イメージを使用してパターンを作成します。 2番目の引数は、repeat、repeat-x、repeaty、およびno-repeatのいずれかの値を持つ文字列です。空の文字列またはnullが指定されている場合、繰り返します。想定される

例

次に、上記の方法を使用して素敵なパターンを作成する簡単な例を示します。

<!DOCTYPE HTML>

<html>
   <head>

      <style>
         #test {
            width:100px;
            height:100px;
            margin: 0px auto;
         }
      </style>

      <script type = "text/javascript">
         function drawShape() {

           //get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');

           //Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {

              //use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');

              //create new image object to use as pattern
               var img = new Image();

               img.src = 'images/pattern.jpg';
               img.onload = function() {

                 //create pattern
                  var ptrn = ctx.createPattern(img,'repeat');
                  ctx.fillStyle = ptrn;
                  ctx.fillRect(0,0,150,150);
               }
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>

   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>

</html>

次のパターン images/pattern.jpg があると仮定します。

パターン

上記の例では、次の結果が描画されます-

影を作成する

HTML5キャンバスは、図面の周りに素敵な影を作成する機能を提供します。すべての描画操作は、4つのグローバルシャドウ属性の影響を受けます。

Sr.No.	Property and Description
1	shadowColor [ = value ] このプロパティは現在の影の色を返し、設定して影の色を変更できます。
2	shadowOffsetX [ = value ] このプロパティは現在のシャドウオフセットXを返し、設定してシャドウオフセットXを変更できます。
3	shadowOffsetY [ = value ] このプロパティは現在のシャドウオフセットYを返し、設定できます。シャドウオフセットYを変更します。
4	shadowBlur [ = value ] このプロパティは、シャドウに適用される現在のぼかしレベルを返します。設定すると、ぼかしレベルを変更できます。

例

以下は、上記の属性を使用して影を描く簡単な例です。

<!DOCTYPE HTML>

<html>
   <head>

      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>

      <script type = "text/javascript">
         function drawShape() {

           //get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');

           //Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {

              //use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');

               ctx.shadowOffsetX = 2;
               ctx.shadowOffsetY = 2;

               ctx.shadowBlur = 2;
               ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

               ctx.font = "20px Times New Roman";
               ctx.fillStyle = "Black";

               ctx.fillText("This is shadow test", 5, 30);
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>

   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
</html>

上記の例では、次の結果が生成されます-

Html5-canvas-pattern-shadow

目次

HTML5 Canvas-パターンと影

パターンを作成

例

影を作成する

例