HTML5-Canvas-1.Canvas-Einführung (Hallo Canvas)_HTML5-Tutorial-Fähigkeiten

Ab heute starten wir eine Kursreihe zum Thema HTML5 Canvas. Diese Serie ist meine Zusammenfassung nach der Lektüre von „HTML5 Canvas: Native Interactivity and Animation for the Web“. Interessierte Freunde können das englische Originalbuch herunterladen und lesen. Dieses Buch zeigt uns die leistungsstarken Funktionen von Canvas, indem es die Methode zur Entwicklung von Canvas-Spielen vorstellt. Ich denke, es ist ziemlich gut, dass ich durch die Lektüre dieses Buches viel gelernt habe. Tatsächlich verfügt Canvas selbst nicht über viele APIs. Der Schlüssel besteht darin, sie flexibel zu nutzen und zu lernen, wie man mit der Kombination von APIs unglaubliche Effekte erzielt. Dieses Buch ist die beste Wahl, um Leinwand zu lernen. Leider gibt es noch keine chinesische Version. Freunde, die nicht gut Englisch können, müssen warten.

Wie wir alle wissen, unterstützen derzeit nicht alle Browser HTML5. Selbst Browser, die HTML5 unterstützen, unterstützen möglicherweise nicht alle neuen Funktionen von HTML5. Daher sollten Sie einen relativ neuen Browser als Debugumgebung wählen. Es wird empfohlen, Firefox (den Favoriten der Entwickler) oder den Chrome-Browser zu verwenden. Alle meine Beispiele basieren auf Firefox.

Grundkenntnisse zu HTML5 werden hier nicht vorgestellt. Es gibt viele Tutorials zu HTML5 im Internet, also lernen Sie es selbst. Um HTML5 zu erlernen, muss jeder über gute JavaScript-Grundkenntnisse verfügen. Sie können Onkel Toms Blog besuchen, um zu lernen: http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html. Tatsächlich ist seine Kursreihe ziemlich schwierig. Wenn Sie alle etwa 50 Kapitel lernen, sollten Sie als JS-Experte gelten.
Jetzt starten wir offiziell mit unserem Canvas-Kurs, das erste Beispiel: „Hallo Canvas“.
Zuerst müssen Sie das Canvas-Tag wie folgt in den Textkörper einfügen:

Code kopieren

Code wie folgt:

Ihr Browser unterstützt kein HTML5 Canvas

Der Textteil im Canvas wird angezeigt, wenn der Browser das Canvas-Objekt nicht unterstützt.
definiert das Canvas-Tag. Wenn wir es über js bedienen müssen, können wir dies über getElementById tun.
var theCanvas = document.getElementById("canvasOne"); Wir sind es jetzt gewohnt, jquery zum Entwickeln von Aufgaben zu verwenden. Wie erhält man also das Canvas-Objekt mit jquery?
var Canvas = $('#canvasOne').get(0); oder var Canvas = $('#canvasOne')[0]; Ich weiß nicht, ob Ihnen das aufgefallen ist get(0) und [ 0] sind nicht vorhanden. Wenn Sie die Methode get() oder den Index [] nicht verwenden, kann Ihr JS-Code die Leinwand nicht normal bedienen. Weil $('#canvasOne') ein Jquery-Objekt erhält und wir eigentlich ein HTML-Dom-Objekt betreiben möchten. Es gibt ein Problem beim Konvertieren eines JQuery-Objekts in ein Dom-Objekt. Diese Konvertierung wird durch get() oder Subskription abgeschlossen. Wenn Sie ein Dom-Objekt in ein JQuery-Objekt konvertieren müssen, können Sie die Methode $() verwenden. Wer es nicht weiß, kann Baidu nur alleine besuchen, daher werde ich hier nicht auf Details eingehen.
Für die Robustheit des Codes müssen wir feststellen, ob Ihr Browser das Canvas-Objekt unterstützt, was durch den folgenden Code erreicht werden kann.

Code kopierenDer Code lautet wie folgt:

if (!theCanvas || !theCanvas. getContext) {
return;
}

Es wird jedoch empfohlen, dass Sie die modernizr.js-Bibliothek verwenden, um diese Arbeit abzuschließen das bietet viele nützliche Methoden.

Code kopierenDer Code lautet wie folgt:

function canvasSupport () {
return Modernizr.canvas
}

canvas unterstützt 2D-Rendering, was durch den folgenden Code erreicht wird: var context = theCanvas.getContext("2d");
Jetzt können wir über das Kontextobjekt Bilder auf die Leinwand zeichnen.

Code kopierenDer Code lautet wie folgt:

//Stellen Sie die Bereichsfarbe ein
context .fillStyle = "#fffaa";
//Bereich zeichnen
context.fillRect(0, 0, 500, 300);
//Schriftart festlegen
context.font = " 20px _sans";
//Vertikale Ausrichtung festlegen
context.textBaseline = "top";
//Text zeichnen
context.fillText ("Hello World!", 195, 80);
// Legen Sie die Rahmenfarbe fest
context.StrokeStyle = "#000000"//Zeichnen Sie den Rahmen
context.StrokeRect(5, 5, 490, 290);
Im Folgenden wird beschrieben, wie man Bilder zeichnet. Aufgrund des asynchronen Herunterladens von Bildern verwenden wir die folgende Methode, um sicherzustellen, dass das Bild heruntergeladen wurde, wenn Sie Canvas zum Zeichnen eines Bildes verwenden:

Code kopieren

Der Code lautet wie folgt:

var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif"
helloWorldImage.onload = function ( ) {
context.drawImage(helloWorldImage, 160, 130);
}

Wenn das Bild fertig ist, wird das Onload-Ereignis ausgelöst, und das Kontextobjekt wird zum Zeichnen des Bildes verwendet.
Laden Sie die Demo herunter, um den vollständigen Code anzuzeigen, Demo-Download-Adresse: html5canvas.helloworld.zip