Erstellen Sie ein Muster mit HTML5 Canvas-HTML-Tutorial-php.cn

Erstellen Sie ein Muster mit HTML5 Canvas

PHPz

Freigeben： 2023-09-02 14:57:02

nach vorne

717 Leute haben es durchsucht

使用HTML5 Canvas创建一个图案

Erstellen Sie ein Muster mit HTML5 Canvas mit der folgenden Methode: createPattern(image, repetition)− Diese Methode verwendet ein Bild, um ein Muster zu erstellen. Der zweite Parameter kann eine Zeichenfolge mit einem der folgenden Werte sein: „repeat“, „repeat-x“, „repeat-y“ und „no-repeat“. Wenn eine leere Zeichenfolge oder Null angegeben wird, wird von einem Duplikat ausgegangen.

Beispiel

Sie können versuchen, den folgenden Code auszuführen, um zu sehen, wie Sie ein Muster erstellen -

<!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(&#39;mycanvas&#39;);
           
            // Make sure we don&#39;t execute when canvas isn&#39;t supported
            if (canvas.getContext){
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext(&#39;2d&#39;);
               
               // create new image object to use as pattern
               var img = new Image();
               img.src = &#39;images/pattern.jpg&#39;;
               img.onload = function(){
                  // create pattern
                  var ptrn = ctx.createPattern(img,&#39;repeat&#39;);
                  ctx.fillStyle = ptrn;
                  ctx.fillRect(0,0,150,150);
               }
            } else {
               alert(&#39;You need Safari or Firefox 1.5+ to see this demo.&#39;);
            }
         }
      </script>
   </head>
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonErstellen Sie ein Muster mit HTML5 Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!