So zeichnen Sie Bilder im HTML5-Canvas-H5-Tutorial-php.cn

So zeichnen Sie Bilder im HTML5-Canvas

不言

Freigeben： 2018-12-01 17:30:15

Original

4692 Leute haben es durchsucht

Canvas ist eine neue Leinwand in HTML5. Wie zeichnet also die HTML5-Leinwand Bilder? In diesem Artikel wird Ihnen die Methode zum Zeichnen von Bildern auf der HTML5-Leinwand vorgestellt. Werfen wir einen Blick auf den spezifischen Inhalt.

HTML5 canvas

Schauen wir uns zuerst direkt das Codebeispiel an

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
    function draw() {
      var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
      if (!canvas || !canvas.getContext) {
        return false;
      }
      var context = canvas.getContext(&#39;2d&#39;);
      var img = new Image();
      img.onload = function onImageLoad() {
        context.drawImage(img, 128, 40);
      }
      img.src = &#39;img/flower.jpg&#39;;
    }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Nach dem Login kopieren

Erklärung: Beim Zeichnen auf der Leinwand ist es üblich, den Kontext der Leinwand zu ermitteln Verfahren.

Bereiten Sie das Bild vor, das auf die Leinwand gezeichnet werden soll. Erstellen Sie ein Bildobjekt.

  var img = new Image();

Nach dem Login kopieren

Zeichnen Sie mit der Methode drawImage() des Canvas-Kontexts ein Bild auf die Leinwand. Die X- und Y-Koordinaten werden zum Zeichnen des Bildobjekts als erster Parameter und des Bilds als zweiter dritter Parameter angegeben. Da das Laden des Bildobjekts asynchron erfolgt, muss es bereit sein, bevor das Bild des Bildobjekts fertig ist . Daher implementieren wir die Zeichnungsverarbeitung beim Onload-Ereignis des Image-Objekts und verarbeiten schließlich die Einstellungen des Quellbilds

img.onload = function onImageLoad() {
    context.drawImage(img, 128, 40);
  }
  img.src = &#39;img/flower.jpg&#39;;

Nach dem Login kopieren

Ausführungsergebnisse

Öffnen Sie die HTML-Datei in einem Webbrowser . Das Ergebnis ist unten dargestellt, das Bild wird auf die Leinwand gezeichnet.

HTML5 canvas

Hinweis: Im Fall des folgenden Codes gibt es keine Garantie dafür, dass das Bild des Image-Objekts gelesen wird, wenn drawImage ausgeführt wird. Es kann also passieren, dass das Bild angezeigt wird. Das Zeichnen von Bildern sollte beim Onload des Image-Objekts implementiert werden.

<script type="text/javascript">    
function draw() {
      var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
      if (!canvas || !canvas.getContext) {
              return false;
      }
      var context = canvas.getContext(&#39;2d&#39;);
      
      var img = new Image();
      img.src = &#39;img/flower.jpg&#39;;
      context.drawImage(img, 128, 40);
    }
  </script>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Bilder im HTML5-Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!