Komentar: Saya tidak akan mencoba teknologi yang tidak banyak didukung Microsoft. Ketika Microsoft mengatakan itu akan mendukungnya, saya akan mencobanya. Mungkin saya sudah terbiasa mengikuti rute Microsoft, tapi cukup bodoh untuk memikirkannya.
MVC adalah hal yang baik. Mengapa Anda tidak mempelajarinya saat memasuki industri? Anda harus menunggu sampai ASP.NET MVC keluar sebelum Anda mempelajarinya; ORM adalah hal yang baik, mengapa Anda harus menunggu sampai EF keluar sebelum Anda mempelajarinya; HTML5 adalah hal yang baik, mengapa Anda harus menunggu sampai IE9 keluar sebelum Anda mempelajarinya? ......-Saya pikir saya harus menyingkirkan kebiasaan buruk ini.
Tidak ada lagi omong kosong.
Persyaratan: Meniru fungsi menggambar titik jangkar untuk gambar di Dreamweaver dan menghasilkan nilai koordin dalam kode HTML.
Analisis Teknis: Intuisi memberi tahu saya bahwa kanvas HTML5 kompeten.
Karena saya tidak pernah terlibat dalam kanvas secara substansi dan hanya melihat demo yang dikembangkan oleh orang lain menggunakan kanvas, saya harus menggerakkan tutorial di kanvas HTML5. Temukan tautan berikut:
Setelah membaca dokumen, tulis kode:
Analisis Kode:
1.1 HTML: Gunakan gambar sebagai pangkalan dan letakkan di atasnya untuk menggambar gambar
1.2 CSS: Setidaknya Anda perlu menempatkan posisi yang tepat, dan tempat transparan harus transparan.
1.3 Javascript: Mousedown, Mousemove, Mouseup
<div>
<img src = "http://www.vevb.com/uploads/allimg/130720/10022r603_0.jpg"/>
<an kanvas>
<p> Beberapa info untuk memberi tahu orang -orang yang Broswer tidak mendukung HTML5 </p>
</ Canvas>
</div>
Siswa yang berpengalaman mungkin tahu bahwa ini ditakdirkan untuk menjadi tragedi ketika mereka melihat kode HTML5. Ketika ada elemen IMG di bawah kanvas, kanvas akan buram tidak peduli apa. Saya lupa apakah saya bisa menggambar sesuatu di kanvas, yang seharusnya tidak berfungsi. Tampaknya elemen kanvas ini memiliki kebersihan dan tidak mau dengan elemen tingkat rendah lainnya. Bahkan jika saya ingin puas dengan yang terbaik kedua, itu tidak akan berfungsi sebagai elemen latar belakang dari Conainer. Perasaan saya adalah bahwa kanvas ini mungkin tidak transparan untuk elemen lain. Jadi kode di atas sebenarnya adalah kode yang salah ...
Jadi bagaimana kita bisa mencapai efek yang sama dengan lapisan di Photoshop? Yaitu untuk mendapatkan beberapa elemen kanvas lagi, mengganti IMG di atas dengan kanvas, dan kemudian menggambar IMG pada kanvas ini, sehingga kanvas transparan ke kanvas. Sayangnya ... kodenya adalah sebagai berikut:
<div>
<Canvas> </an Canvas>
<an kanvas>
<p> Beberapa info untuk memberi tahu orang -orang yang Broswer tidak mendukung HTML5 </p>
</ Canvas>
</div>
Nah, HTML selesai, dan langkah selanjutnya adalah menggambar di atas kanvas. Dengan bantuan JavaScript, tugas ini sangat sederhana.
window.addeventListener ('load', function () {
// Dapatkan elemen kanvas.
var elem = document.geteLementById ('bg');
if (! elem ||! elem.getContext) {
kembali;
}
// Dapatkan konteks Canvas 2D.
var context = elem.getContext ('2d');
if (! Context ||! Context.DrawImage) {
kembali;
}
// Buat gambar baru.
var img = gambar baru ();
// Setelah dimuat gambar gambar di kanvas.
img.addeventListener ('load', function () {
// Resolusi Asli: x, y.
Context.drawimage (ini, 0, 0);
// Sekarang ubah ukuran gambar: x, y, w, h.
Context.drawimage (ini, 160, 0, 120, 70);
// Pangkas dan ubah ukuran gambar: SX, SY, SW, SH, DX, DY, DW, DH.
Context.drawimage (ini, 8, 20, 140, 50, 0, 150, 350, 70);
}, PALSU);
img.src = 'http://www.vevb.com/uploads/allimg/130720/10022r603_0.jpg';
}, PALSU);
// Harap dicatat bahwa kode yang diambil langsung dalam dokumen diperlukan untuk Opera dan IE9 Acara Onload, jika tidak gambar akan kosong, tentu saja, ini tidak akan terjadi di bawah Chrome.
Untuk dilanjutkan ...
Alamat asli