Vorläufige Studiennotizen zu Html5 Canvas (1) – Zeichnen Sie ein Rechteck

Das

canvas-Element ist eine neue Funktion von Html5 im Vergleich zum vorherigen Html In diesem Blogbeitrag wird die Anwendung dieser Komponente untersucht, insbesondere ihre Anwendung bei der Entwicklung von Webspielen. Die

canvas-Komponente ähnelt den vorherigen Komponenten table und p und kann ohne externe Plug-Ins ausgeführt werden. Verwenden Sie einfach html und die 2D Rendering-Kontext-API (2Drender-Kontext-API), ähnlich unserer j2me-Entwicklung Grafiken in Android und Leinwand Pinsel in Android

Solange Sie diesen Kontext erhalten, können Sie anrufen eine eigene Methode zum Zeichnen.

Wir können eine Leinwand wie folgt definieren:

<canvas id="canvas" width="400" height="400"> </canvas>

Canvas wird als Wrapper für den 2D-Renderingkontext 2D< verwendet 🎜>Der Rendering-Kontext basiert auf dem „Pinsel“ der LeinwandLeinwand. Es verwendet ein flaches kartesisches Koordinatensystem mit der oberen linken Ecke als Ursprung (0, 0). Wenn Sie sich nach rechts bewegen, erhöht sich der Koordinatenwert von x. Wenn Sie sich nach unten bewegen, erhöht sich der Wert von y sehr ähnlich zu unserer Die j2me Leinwand.

Okay, nach der Einführung einiger grundlegender Konzepte werde ich zuerst den ersten Html5 Canvas erstellen Insgesamt ist die Darstellung wie folgt

A sehr einfach Ein Beispiel ist das Zeichnen eines Rechtecks. Schauen wir uns den folgenden Code an:

Darunter die Beschriftung von Leinwand Definiert einen Canvas-Canvas, es erfolgt jedoch keine Verarbeitung. Der Teil des Tags script ist js Der folgende Teil des Codes besteht darin, den Rendering-Kontext abzurufen:

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

Holen Sie sich zuerst das Element canvas und dann das 2dgerenderter Kontext.

Der folgende Code dient zum Zeichnen des rechteckigen Teils:

context.fillStyle = '#000000';
context.fillRect(50, 50, 100, 100);

Stellen Sie zuerst die Farbe ein und zeichnen Sie dann. Die vier Parameter sind die horizontalen und vertikalen Koordinaten des Startpunkts und die Breite und Höhe

Das Obige ist der Inhalt von Html5 Canvas Preliminary Study Notes (1) – Zeichnen eines Rechtecks. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).