html5 percubaan pertama pisau di bawah kemahiran tutorial IE9 _html5

MVC adalah perkara yang baik, mengapa anda tidak mempelajarinya apabila anda mula-mula memasuki industri Anda perlu menunggu sehingga asp.net MVC keluar sebelum anda mempelajarinya, mengapa anda perlu menunggu sehingga EF datang untuk mempelajarinya? HTML5 adalah perkara yang baik Mengapa anda perlu menunggu sehingga IE9 keluar untuk mempelajarinya? ...

——Saya rasa saya patut buang tabiat buruk ini.

Tiada lagi perkara karut.

Keperluan: Tiru fungsi melukis mata sauh untuk gambar dalam Dreamweaver, dan jana nilai kord dalam kod HTML.

Analisis teknikal: Intuisi memberitahu saya bahawa kanvas html5 boleh melakukan kerja itu.

Memandangkan saya tidak pernah mempunyai hubungan yang ketara dengan kanvas dan hanya melihat demo yang dibangunkan oleh orang lain menggunakan kanvas, saya tidak mempunyai pilihan selain melihat tutorial kanvas html5. Menemui pautan berikut: http://kb.operachina.com/node/190

Tulis kod selepas membaca dokumen:

Analisis kod:

1.1 html: Gunakan gambar sebagai latar belakang, dan letakkan kanvas di atasnya untuk lukisan

1.2 css: Anda mesti sekurang-kurangnya meletakkannya pada kedudukan yang betul dan menjadikan tempat lutsinar itu telus

Javascript 1.3: Acara tetikus perlu bertindak balas kepada tiga: tetikus turun, tetikus alih, tetikus naik

Salin kod

Kodnya adalah seperti berikut:

beberapa maklumat untuk memberitahu orang yang penyemak imbasnya tidak menyokong html5

menjadi tragedi sebaik sahaja mereka melihat kod html5 ini Apabila elemen berada di bawah kanvas, kanvas menjadi legap juga. Jika anda terlupa sama ada anda boleh melukis sesuatu pada kanvas, ia mungkin tidak akan berfungsi. Nampaknya elemen kanvas ini mempunyai "kebersihan" dan tidak mahu menyertai barisan elemen peringkat rendah yang lain. Walaupun saya ingin menyelesaikan perkara terbaik seterusnya, ia tidak akan berfungsi jika ia muncul sebagai elemen latar belakang bekas. Perasaan saya ialah kanvas ini mungkin tidak telus kepada elemen lain. Jadi kod di atas sebenarnya adalah kod yang salah...

Jadi bagaimana kita boleh mencapai kesan yang serupa dengan lapisan dalam photoshop? Iaitu untuk mencipta beberapa lagi elemen kanvas, gantikan img di atas dengan kanvas, dan kemudian lukis img ke kanvas ini, supaya kanvas itu lutsinar ke kanvas. Hei... kodnya adalah seperti berikut:

Salin kod

Kodnya seperti berikut: < div id="container">

="drewpanel" width=" 390" height="560">

beberapa maklumat untuk memberitahu orang yang pelayarnya tidak menyokong html5

>

Sekarang html selesai, langkah seterusnya ialah melukis di atas kanvas Dengan bantuan javascript, tugas ini sangat mudah.

Salin kod


Kod adalah seperti berikut:

window.addEventListener ('load ', function () { // Dapatkan elemen kanvas. var elem = document.getElementById('bg'); if (!elem || !elem.getContext) {

kembali ;

}

// Dapatkan konteks 2d kanvas
konteks var = elem.getContext('2d'); 🎜>kembali ;
}
// Cipta imej baharu
var img = new Image();// Setelah ia dimuatkan, lukiskan imej pada kanvas ('load ', fungsi () {
// Peleraian asal: x, y.
context.drawImage(this, 0, 0);
// Sekarang ubah saiz imej: x, y, w , h.
context.drawImage(ini, 160, 0, 120, 70); >gambar.gambar(ini, 8, 20, 140, 50, 0, 150, 350, 70),
img.src = 'http://www.sh1800.net/); NavPic/20100917 .jpg';
},
//Kod yang diambil secara langsung daripada dokumen itu adalah perlu untuk acara opera dan ie9, jika tidak, gambar tersebut akan kosong , ia tidak akan berada di bawah Chrome dengan cara ini


Bersambung....
Alamat asal http://www.cnblogs.com/ice6/archive/2010/09/18 /1830020.html