cari

Rumah >hujung hadapan web >Tutorial H5 >html5 percubaan pertama pisau di bawah kemahiran tutorial IE9 _html5

html5 percubaan pertama pisau di bawah kemahiran tutorial IE9 _html5

WBOY
WBOYasal
2016-05-16 15:51:151842semak imbas

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
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：15 tutorial pembangunan HTML5 yang sangat berguna dan manual rujukan cepat_html5 kemahiran tutorialArtikel seterusnya：15 tutorial pembangunan HTML5 yang sangat berguna dan manual rujukan cepat_html5 kemahiran tutorial

Artikel berkaitan

Lihat lagi