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

HTML5Canvasでパターンを作成する

HTML5 Canvasでパターンを作成するには、次のメソッドを使用します。createPattern（image、repeatment）-このメソッドは、画像を使用してパターンを作成します。 2番目の引数は、repeat、repeat-x、repeat-y、およびno-repeatのいずれかの値を持つ文字列にすることができます。空の文字列またはnullが指定されている場合、繰り返しが想定されます。

例

次のコードを実行して、パターンの作成方法を学ぶことができます-

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #test {
            width:100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      <script>
         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>

  1. HTML5 SVGで角が丸い長方形を作成するにはどうすればよいですか？

    SVGはScalableVectorGraphicsの略で、2DグラフィックスとグラフィカルアプリケーションをXMLで記述するための言語であり、XMLはSVGビューアによってレンダリングされます。ほとんどのWebブラウザーは、PNG、GIF、およびJPGを表示できるのと同じようにSVGを表示できます。 HTML SVGで長方形を描画するには、SVG要素を使用します。角が丸い場合は、長方形の角を丸くするrxおよびry属性を設定します。 例 次のコードを実行して、HTML5SVGで角が丸い長方形を描画する方法を学ぶことができます。 <!DOCTYPE html> <ht

  2. HTML5キャンバスで画像を使用する方法は？

    HTML5 タグは、スクリプトを使用してグラフィックやアニメーションなどを描画するために使用されます。 HTML5で導入された新しいタグです。 HTML5キャンバスで画像を使用するには、drawImage（）メソッドを使用します。このメソッドは、指定された画像をキャンバスに描画します。 次のコードを実行して、HTMLCanvasで画像を使用する方法を学ぶことができます。ここで、画像は画像またはキャンバスオブジェクトへの参照です。 xとyは、画像を配置するターゲットキャンバス上の座標を形成します。 例 <!DOCTYPE HTML> <html>