Versuchen Sie zunächst, Messer unter IE9 mit HTML5 zu testen. _html5-Tutorial-Fähigkeiten

MVC ist eine gute Sache. Warum lernen Sie es nicht, wenn Sie zum ersten Mal in die Branche einsteigen? Sie müssen warten, bis asp.net herauskommt. ORM ist eine gute Sache. Warum müssen Sie warten, bis EF kommt heraus, um es zu lernen? HTML5 ist eine gute Sache. Warum müssen Sie warten, bis IE9 herauskommt, um es zu lernen? ...

——Ich denke, ich sollte diese schlechte Angewohnheit loswerden.

Kein Unsinn mehr.

Anforderungen: Imitieren Sie die Funktion zum Zeichnen von Ankerpunkten für Bilder in Dreamweaver und generieren Sie den Koordinatenwert im HTML-Code.

Technische Analyse: Die Intuition sagt mir, dass HTML5-Canvas den Job erledigen kann.

Da ich noch nie nennenswerten Kontakt mit Canvas hatte und nur Demos gesehen habe, die von anderen mit Canvas entwickelt wurden, blieb mir nichts anderes übrig, als einen Blick auf das HTML5-Canvas-Tutorial zu werfen. Den folgenden Link gefunden: http://kb.operachina.com/node/190

Schreiben Sie den Code nach dem Lesen des Dokuments:

Codeanalyse:

1.1 HTML: Verwenden Sie ein Bild als Hintergrund und legen Sie die Leinwand zum Zeichnen darauf

1.2 CSS: Sie müssen es mindestens an der richtigen Position platzieren und die transparenten Stellen transparent machen

1.3 Javascript: Mausereignisse müssen auf drei reagieren: Mousedown, Mousemove, Mouseup

Code kopieren

Der Code lautet wie folgt:

Einige Informationen, um den Leuten mitzuteilen, deren Browser HTML5 nicht unterstützt.

Wenn man sich diesen HTML5-Code ansieht, ist die Leinwand sowieso undurchsichtig. Wenn man vergisst, ob man etwas auf die Leinwand zeichnen kann, wird es wahrscheinlich nicht funktionieren. Es scheint, dass dieses Canvas-Element eine „Sauberkeit“ aufweist und nicht bereit ist, sich den Reihen anderer Elemente auf niedriger Ebene anzuschließen. Selbst wenn ich mich mit dem nächstbesten zufrieden geben möchte, funktioniert es nicht, wenn es als Hintergrundelement des Containers erscheint. Ich habe das Gefühl, dass diese Leinwand für andere Elemente möglicherweise nicht transparent ist. Der obige Code ist also eigentlich falscher Code...

Wie können wir also einen ähnlichen Effekt wie die Ebenen in Photoshop erzielen? Das heißt, ein paar weitere Leinwandelemente zu erstellen, das obige Bild durch eine Leinwand zu ersetzen und dann das Bild auf diese Leinwand zu zeichnen, sodass die Leinwand für die Leinwand transparent ist. Hey... der Code lautet wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt:

< div id="container"> ="drewpanel" width=" 390" height="560">

einige Informationen für die Leute, deren Browser HTML5 nicht unterstützt >

Nachdem der HTML-Code fertig ist, besteht der nächste Schritt darin, mit Hilfe von Javascript zu zeichnen.






Code kopieren

Der Code lautet wie folgt:

window.addEventListener ('load ', function () {

// Holen Sie sich das Canvas-Element. var elem = document.getElementById('bg'); if (!elem || !elem.getContext) { return ; }

// Holen Sie sich den Canvas-2D-Kontext

var context = elem.getContext('2d');

if (!context || !context.drawImage) {
return ;
}
// Erstelle ein neues Bild
var img = new Image();// Sobald es geladen ist, zeichne das Bild auf die Leinwand ('load ', function () {
// Ursprüngliche Auflösung: x, y.
context.drawImage(this, 0, 0);
// Jetzt die Größe des Bildes ändern: x, y, w , h.
context.drawImage(this, 160, 0, 120, 70);
// Bild zuschneiden und sx, sy, sw, dx, dy, dw, dh >context.drawImage(this, 8, 20, 140, 50, 0, 150, 350, 70);
img.src = 'http://www.sh1800.net/ NavPic/20100917 .jpg';
}//Der Code wird direkt aus dem Dokument übernommen, da dies für Opera- und ie9-Onload-Ereignisse erforderlich ist , es wird nicht unter Chrome verfügbar sein


Fortsetzung folgt...
Ursprüngliche Adresse http://www.cnblogs.com/ice6/archive/2010/09/18 /1830020.html