So wird’s gemacht: Anzeigen eines Bildes (HTML)

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Das Canvaselement ist ein Zeichenbereich im HTML-Dokument, in dem Sie mit JavaScript Grafiken wie Animationen, Diagramme und Spiele generieren können. In diesem Thema werden die Schritte zum Anzeigen eines Bilds mithilfe des Canvaselements beschrieben.

Voraussetzungen

In diesem Thema wird Folgendes vorausgesetzt:

Sie können eine einfache Windows Store-App mit JavaScript erstellen, die die Vorlage "Windows-Bibliothek für JavaScript" verwendet.
Sie besitzen Grundkenntnisse in HTML und JavaScript.

Anweisungen zum Erstellen Ihrer ersten Windows Store-App mit JavaScript finden Sie unter Erstellen Ihrer ersten Windows Store-App mit JavaScript. Anweisungen zur Verwendung der Vorlage "WinJS" finden Sie unter "Herunterladen und Verwenden des WinJS-Toolkits".

Anweisungen

Schritt 1: Abrufen des Renderkontexts

Bevor wir ein Bild auf der Canvas zeichnen, müssen wir den Renderkontext aus dem Canvaselement abrufen. Im Renderkontext werden alle Zeichenmethoden und -eigenschaften definiert. Da jedem <canvas>-Element ein Renderkontext zugeordnet ist (häufig mit dem Variablennamen ctx), können wir erst auf diesen Kontext zugreifen, wenn die Seite vollständig geladen wurde (d. h. wenn das canvas-Element vollständig im DOM verfügbar ist). Um sicherzustellen, dass das canvas-Element im DOM verfügbar ist, können Sie Ihren Skriptblock wie hier gezeigt am Ende der Seite platzieren:

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Canvas element image drawing</title>
  <style>
    .
    .
    .
  </style>
</head>

<body>
  .
  .
  .
  <script>
    .   
    .
    .
  </script>
</body>

</html>

Jetzt können wir den Renderkontext wie folgt abrufen:

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Canvas element image drawing</title>
  <style>
    canvas {
      border: 1px black solid; /* Draw a border around the canvas element. */
    }
  </style>
</head>

<body>
  <canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
  <script>
    var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');   
  </script>
</body>

</html>

Wie Sie sehen können, erwartet das canvas-Element ein Bild im Format 491px x 538px. Wir rufen den Kontext (ctx) ab, indem wir eine Liste aller Canvaselemente im DOM abrufen, das erste (und einzige) Element auswählen und seinen Kontext durch Aufrufen von getContext('2d') abrufen.

Schritt 2: Laden des anzuzeigenden Bilds

Da das Herunterladen von Bildern auf den Client etwas dauern kann, sollten wir erst auf sie zugreifen, nachdem sie vollständig geladen wurden. Dazu wird der onload-Ereignishandler des Bildobjekts wie folgt verwendet:


var imageToDraw = new Image();

imageToDraw.onload = function() {
  // It is now safe to access the image.
}

imageToDraw.src = 'images/duckCat.jpg';

In diesem Beispiel wird die anonyme Funktion erst aufgerufen, nachdem das zugehörige Bild (duckCat.jpg) vollständig geladen wurde.

Schritt 3: Anzeigen des Bilds

Mit dem onload-Ereignishandler können wir das Bild wie folgt auf der Canvas anzeigen:


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Canvas element image drawing</title>
  <style>
    body {
      width: 402px; /* Accommodate the 1px canvas borders. */
      margin: 0 auto; /* Center the page's content. */
    }
    
    h1 {
      text-align: center;
    }
       
    canvas {
      border: 1px black solid; /* Draw a border around the canvas element. */
    }
  </style>
</head>

<body>
  <h1>How to display an image using the canvas element</h1>
  <canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
  <script>
    var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');    
    var imageToDraw = new Image();

    imageToDraw.onload = function() {
      ctx.drawImage(imageToDraw, 0, 0);
    }
    
    imageToDraw.src = 'images/duckCat.jpg';    
  </script>
</body>

</html>

Anmerkungen

Die drawImage-Methode akzeptiert mehr Parameter als im obigen Beispiel gezeigt und ist recht leistungsstark. Weitere Informationen finden Sie unter Verwenden von Bildern auf der Mozilla Developer Network-Website.

Freigeben über