Kommentar: Ich werde die Technologie, die Microsoft nicht sehr unterstützt, nicht ausprobieren. Wenn Microsoft sagt, dass es es unterstützt, werde ich es versuchen. Vielleicht bin ich es gewohnt, Microsofts Route zu folgen, aber es ist ziemlich dumm, darüber nachzudenken.
MVC ist eine gute Sache. Warum lernen Sie es nicht, wenn Sie in die Branche eintreten? Sie müssen warten, bis ASP.NET MVC herauskommt, bevor Sie es lernen. Orm ist eine gute Sache, warum müssen Sie warten, bis EF herauskommt, bevor Sie es lernen? HTML5 ist eine gute Sache, warum müssen Sie warten, bis IE9 herauskommt, bevor Sie es lernen? ......-Ich denke, ich sollte diese schlechte Angewohnheit loswerden.
Kein Unsinn mehr.
Anforderungen: Imitieren Sie die Funktion des Zeichnens von Ankerpunkten für Bilder in Dreamweaver und generieren Koordnungswerte im HTML -Code.
Technische Analyse: Intuition sagt mir, dass HTML5 -Leinwand kompetent ist.
Da ich noch nie in Substanz in Leinwand beteiligt war und nur Demos gesehen habe, die von anderen mit Leinwand entwickelt wurden, musste ich das Tutorial auf HTML5 -Leinwand bingen. Entdecken Sie den folgenden Link:
Schreiben Sie nach dem Lesen des Dokuments den Code:
Codeanalyse:
1.1 HTML: Verwenden Sie ein Bild als Basis und platzieren Sie es zum Zeichnen von Bildern
1,2 CSS: Zumindest müssen Sie die richtige Position platzieren, und der transparente Ort sollte transparent sein.
1.3 JavaScript: Mousedown, Mousemove, MouseUp
<div>
<img src = "http://www.vevb.com/uploads/allimg/130720/10022r603_0.jpg"/>
<Canvas>
<p> Einige Informationen, um den Personen zu sagen, deren Broswer HTML5 </p> nicht unterstützt
</canvas>
</div>
Erfahrene Schüler wissen möglicherweise, dass dies eine Tragödie sein soll, wenn sie sich den HTML5 -Code ansehen. Wenn sich unter der Leinwand ein IMG -Element befindet, sind die Leinwand egal was passiert. Ich habe vergessen, ob ich etwas auf die Leinwand zeichnen kann, was nicht funktionieren sollte. Es scheint, dass dieses Canvas-Element eine Sauberkeit hat und nicht bereit ist, mit anderen Elementen auf niedriger Ebene zusammen zu sein. Auch wenn ich mich mit dem zweitbesten zufrieden geben möchte, funktioniert es nicht als Hintergrundelement des Cantainers. Ich habe das Gefühl, dass diese Leinwand für andere Elemente möglicherweise nicht transparent ist. Der obige Code ist also tatsächlich der falsche Code ...
Wie können wir also ähnliche Auswirkungen wie Schichten in Photoshop erzielen? Das heißt, ein paar weitere Leinwandelemente zu erhalten, das obige IMG durch Leinwand zu ersetzen und dann die IMG auf diese Leinwand zu zeichnen, damit Leinwand für Leinwand transparent ist. Leider ... der Code ist wie folgt:
<div>
<Canvas> </canvas>
<Canvas>
<p> Einige Informationen, um den Personen zu sagen, deren Broswer HTML5 </p> nicht unterstützt
</canvas>
</div>
Nun, die HTML ist fertig, und der nächste Schritt besteht darin, auf Leinwand zu stützen. Mit Hilfe von JavaScript ist diese Aufgabe sehr einfach.
window.addeventListener ('laden', function () {
// Holen Sie sich das Canvas -Element.
var elem = document.getElementById ('bg');
if (! Elem ||! Elem.getContext) {
zurückkehren;
}
// Holen Sie sich den Canvas 2D -Kontext.
var context = elem.getContext ('2d');
if (! context ||! context.drawimage) {
zurückkehren;
}
// Erstellen Sie ein neues Bild.
var img = new Image ();
// Sobald es geladen ist, zeichnen Sie das Bild auf der Leinwand.
img.addeventListener ('last', function () {
// Originalauflö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);
// Ernte und die Größe des Bildes ändern: SX, SY, SW, SH, DX, DY, DW, DH.
context.drawimage (this, 8, 20, 140, 50, 0, 150, 350, 70);
}, FALSCH);
img.src = 'http://www.vevb.com/uploads/allimg/130720/10022r603_0.jpg';
}, FALSCH);
// Bitte beachten Sie, dass der Code, der direkt im Dokument aufgenommen wurde, für die Opera und IE9 -Onload -Ereignisse erforderlich ist. Andernfalls ist das Bild leer. Dies ist natürlich nicht der Fall unter Chrome.
Fortgesetzt werden...
Originaladresse