Lernprogramm zur Entwicklung von Canvas-Spielen, Teil eins: Erste Einführung in das -Tag

Beginnen wir mit der Definition des -Elements.

<canvas id="myCanvas" width="150" height="150"></canvas>

sieht sehr ähnlich, der einzige Unterschied besteht darin, dass es die Attribute src
und alt
nicht enthält. Es verfügt nur über zwei Eigenschaften, width und height, die beide optional sind und über DOM oder CSS festgelegt werden können. Wenn Breite und Höhe nicht angegeben sind, ist der Standardwert 300 Pixel breit und 150 Pixel hoch. Obwohl die Größe der Leinwand über CSS geändert werden kann, wird das gerenderte Bild an das Layout angepasst (wenn Sie feststellen, dass die Rendering-Ergebnisse verzerrt aussehen, anstatt sich ausschließlich auf CSS zu verlassen, versuchen Sie, die Breiten- und Höheneigenschaften der Leinwand explizit anzugeben). Das schließende Tag ist erforderlich. Das

-Element kann wie ein normales Bild gestaltet werden (Ränder, Rahmen, Hintergrund usw.). Diese Stile haben jedoch keinen Einfluss auf das tatsächlich von Canvas erzeugte Bild. Als Nächstes erfahren Sie, wie Sie Stile anwenden. Wenn kein Stil angegeben ist, ist die Leinwand standardmäßig vollständig transparent.

Da
relativ neu ist und einige Browser es nicht implementiert haben, wie Firefox 1.0 und Internet Explorer, müssen wir alternative Anzeigeinhalte für die Browser bereitstellen, die Canvas nicht unterstützen. Wir müssen lediglich den Ersatzinhalt direkt in das Canvas-Element einfügen. Browser, die Canvas nicht unterstützen, ignorieren das Canvas-Element und rendern den alternativen Inhalt direkt, während Browser, die es unterstützen, das Canvas normal rendern. Beispielsweise können wir Text oder Bilder als alternativen Inhalt in die Leinwand einfügen:

<canvas id="game" width="150" height="150">
  Oh dear, your browser dosen&#39;t support HTML5! Tell you what, why don&#39;t you upgrade to a decent browser - you won&#39;t regret it!</canvas>

<canvas id="clock" width="150" height="150">
  <imgsrc="images/clock.png" width="150" height="150"/>
</canvas>

Der erstellte Zeichenbildschirm mit fester Größe öffnet einen oder mehrere Rendering-Kontexte (Rendering-Kontext). , über die wir den anzuzeigenden Inhalt steuern können. Wir konzentrieren uns auf 2D-Rendering, das derzeit die einzige Option ist, und fügen möglicherweise in Zukunft einen OpenGL ES-basierten 3D-Kontext hinzu.

Um mit einem Skript darauf zu zeichnen, benötigen Sie zunächst dessen Rendering-Kontext. Er kann gleichzeitig über die Methode getContext
abgerufen werden Zeit, die erhaltenen Es gibt einige Funktionen zum Zeichnen. getContext()
akzeptiert einen Wert, der seinen Typ beschreibt, als Parameter. getContext() gibt ein CanvasRenderingContext2D-Objekt zurück.

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

Wir beginnen mit der folgenden minimalen Codevorlage (die in den folgenden Beispielen verwendet wird).

  
    
    
    
  

  
    <canvas id="myCanvas" width="150" height="150"></canvas>
  

Wenn Sie vorsichtig sind, werden Sie feststellen, dass ich eine Funktion namens draw
vorbereitet habe, die einmal ausgeführt wird, nachdem die Seite geladen wurde (durch Festlegen des Onload-Attributs des Body-Tags). Natürlich können auch andere Event-Handler aufgerufen werden.

Das Obige ist eine der Studien zur Entwicklung von Canvas-Spielen: Schauen Sie sich zunächst den Inhalt des -Tags an. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com).