Beberapa hari yang lalu, saya menggunakan gaya css dan js untuk memberi penghormatan kepada antarmuka serupa github404. Pada saat yang sama, saya baru-baru ini bersentuhan dengan kanvas. Dengan ide untuk bermain-main, saya menggunakan algoritma js sebelumnya gunakan kanvas untuk melengkapi efek dinamis github404.
rendering
Direktori berkas Sumber daya berkasKode sumber file dan gambar diberikan di akhir artikel
kodeBagian tubuh halaman web
Di sini, tentukan lebar dan tinggi kanvas dan atur sebagai elemen tingkat blok. Tag img ini memuat gambar-gambar ini, jadi kita tidak perlu memuatnya di js, lalu mengatur gambar agar tidak menampilkan display:none.
<body> <canvas id=mycanvas width=1680 height=630 style=margin:0;display:block> Browser Anda tidak mendukung kanvas </canvas> <img src=./images/field.png style=display: none > <img src=./images/text.png style=display:none> <img src=./images/cat.png style=display:none> <img src=./images/cat_shadow.png style=display:none> <img src=./images/speeder.png style=display:none> <img src=./images/speeder_shadow. png style=display:none> <img src=./images/buliding_1.png style=display:none> <img src=./images/building_2.png style=display:none> </body>bagian js
1. Disini saya masih membuat objek json baru bernama github404 untuk merangkum semua parameter dan metode.
2. Buat objek imgData lagi dan teruskan semua parameter yang diperlukan untuk img ke ps:top dan left untuk penentuan posisi dalam metode drawImage(). Parameter skala digunakan untuk menghitung pergerakan gambar yang sesuai saat mouse bergerak.
3. Metode init() digunakan untuk inisialisasi dan merupakan antarmuka dengan dunia luar
4. Implementasi metode menggambar adalah dengan menggunakan loop for in untuk melintasi imgData[], kemudian menetapkan nilai secara berurutan, dan terakhir menggunakan metode drawImage() untuk menggambar. anda perlu memperhatikan penggunaan metode ctx.clearRect() untuk menghapus kanvas terlebih dahulu.
<script> var github404 = { imgData: {//Rekam informasi semua gambar sebagai objek json bg: { atas: 0, kiri: 110,//atas dan kiri digunakan untuk penentuan posisi, gunakan src: './ images/ field.png',//Skala jalur gambar yang sesuai: 0,06,//Saat mouse bergerak, proporsi pergerakan gambar yang sesuai}, building_2: { atas: 133, kiri: 1182, src: './images/building_2.png', skala: 0,05, }, building_1: { atas: 79, kiri: 884, src: './images/building_1.png', skala: 0,03, }, speeder_shadow : { atas: 261, kiri: 776, src: './images/speeder_shadow.png', skala: 0,01, }, cat_shadow: { atas: 288, kiri: 667, src: './images/cat_shadow.png', skala: 0,02, }, speeder: { atas: 146, kiri: 777, src: './images/speeder.png', skala: 0,01, }, kucing: { atas: 88, kiri: 656, src: './images/cat.png', skala: 0,05, }, teks: { atas: 70, kiri: 364, src: './images/text ' .png', skala: 0,03, }, }, rate_w: 0, rate_h: 0,//Rasio offset field_width: 1680, field_height: 370,//Tinggi dan lebar latar belakang kanvas: document.querySelector('#mycanvas'),//Dapatkan elemen kanvas init: function() {//Inisialisasi metode pemuatan this.setRateWH(); placeImg( ); this.attachMouseEvent() }, setRateWH: function() {//Metode untuk menghitung rasio offset var window_width = document.body.clientWidth; var window_height = document.body.clientHeight; this.rate_w = this.field_width/window_width; this.rate_h = this.field_height/window_height }, placeImg: function() {//Metode menggambar yang diinisialisasi, biarkan ctx = this.canvas.getContext('2d');//Dapatkan kuas untuk(masukkan this.imgData){//Melintasi objek imageData var image = new Image(); var left = this.imgData[key].left; var top = this.imgData[key].top; [ kunci].src; ctx.drawImage(gambar,kiri,atas, gambar.lebar,gambar.tinggi }, lampirkanMouseEvent: function() { var itu = ini; document.body.onmousemove = function(e){ that.picMove(e.pageX,e.pageY); kanvas.getContext('2d'); ctx.clearRect(0,0,ini.kanvas.lebar,ini.kanvas.tinggi); this.imgData) { var gambar = Gambar baru(); var offer_w = this.rate_w * pageX * this.imgData[key].scale; /Tentukan kiri dan atas, dan posisikan parameter saat menggambar di bawah var left = this.field_width/100 - offer_w + this.imgData[key].left; this.field_height/100 - offer_h + this.imgData[key].top; image.src = this.imgData[key].src; } } window.onload = function() { //Hanya panggil metode init dari github404 untuk merangkum data github404.init(); MeringkaskanKali ini saya menggunakan kanvas untuk melengkapi efek dinamis ini, yang membuat saya lebih memahami tentang penggunaan kanvas. buatkan aku pada saat yang sama
Saya memiliki pemahaman lebih dalam tentang penggunaan objek json untuk merangkum data dan metode serta cara mengatur kode.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.