Baru -baru ini saya membuat proyek di mana ada kebutuhan untuk mewujudkan efek animasi dari hujan dan salju ringan, jadi saya membuat komponen drop di sini untuk menunjukkan benda -benda jatuhan yang umum dari kanvas ini. Sebelum memperkenalkan teks utama kepada Anda, izinkan saya menunjukkan kepada Anda rendering:
Tampilan rendering:
Hujan dan salju
Itu terlihat bagus. Dibandingkan dengan menggunakan pembuatan elemen DOM untuk membuat gambar gerakan posisi multi-objek, menggunakan kanvas akan lebih mudah dan lebih cepat, dan kinerjanya akan lebih baik.
Kode panggilan
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> dokumen </iteme> <tyle> #canvas {width: 100%; tinggi: 100%;} </style> </head> <body> <canvas id = "canvas"> </style> </adep src = "canvasdrop.js"> </script> <script> canvasdrop.init ({type: "Rain", // Jenis drop, Rain atau Snowspeed: [0,4,2.5], // Kisaran kecepatan size_range: [0.5.1.5], // Kisaran ukuran dan jari -jari telah beralkohol: true,///0 apa pun di sana atau rebal fales: hasgravity: true // Apakah ada pertimbangan gravitasi}); </script> </body> </html>Oke, mari kita jelaskan prinsip implementasi sederhana. Pertama, tentukan beberapa variabel global yang akan kami gunakan, seperti sudut arah angin, probabilitas, data objek, dll.
Tentukan variabel global
// Tentukan dua data objek // Drops Drop Object Object Object // dan Rebound Object Bounces Object Var Drops = [], Bounces = []; // Akselerasi gravitasi diatur ke 0,2/satu frame var gravitasi = 0,2; var speed_x_x, // horizontal akselerasi speed_x_y, // longilerine longileration winder_ang; // Arah angin // Lebar piksel dan tinggi kanvas var canvaswidth, canvasheight; // Probabilitas untuk membuat drop var drop_chance; // Mengkonfigurasi objek var opts; // default apakah ada metode frame -frame yang ada, jika ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada, jika tidak ada di WindowRame. || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationFrame || window.msrequestanimationframe || fungsi (callback) {window.setTimeout (callback, 1000 /30);};Tentukan objek inti
Selanjutnya kita perlu mendefinisikan beberapa objek penting. Ada lebih sedikit objek yang perlu didefinisikan oleh organisasi. Secara total, hanya tiga objek inti yang didefinisikan di seluruh komponen drop, yaitu sebagai berikut:
Objek kecepatan vektor, dengan x horizontal dan unit ukuran kecepatan y vertikal: V = piksel/bingkai perpindahan
Pemahaman tentang objek vektor juga sangat sederhana dan kasar, yaitu mencatat kecepatan objek jatuh/v
var vector = function (x, y) {// atribut privat kecepatan horizontal x, kecepatan vertikal ythis.x = x || 0; this.y = y || 0;}; // Metode Publik- Tambah: Fungsi Perubahan Kecepatan, Tingkatkan Kecepatan Menurut parameter // Karena kebutuhan bisnis, semua akselerasi jatuh dipertimbangkan, jadi tidak ada perlambatan, dan dapat diperluas pada tahap selanjutnya/** @param V objek || string */vector.prototype.add = function (v) {if (vx! = null && vy! = null) {this.x += vx; this.y += vy;} else {this.x += v; this.y += v;} kembalikan nol ini;}; // metode publik- salin: vektor vektor ini ke vektor vektor ini ke vektor nol;} vektor. {// Mengembalikan instance vektor dengan atribut kecepatan yang sama mengembalikan vektor baru (this.x, this.y);}; Jatuhkan objek objek drop, yaitu, tetesan air hujan dan salju dalam efek di atas, nanti Anda dapat memperluasnya ke meteorit atau shell. Definisi dasar dari objek drop adalah sebagai berikut // konstruktor var drop = function () {/ * .... */}; // metode publik-update drop.prototype.update = function () {/ * .... */}; // Public Method-drawdrop.prototype.draw = function () {/ * ...... */};Setelah membaca tiga metode di atas, apakah Anda sudah menebak peran mereka? Mari kita pahami apa yang dilakukan ketiga metode ini.
Konstruktor
Konstruktor terutama bertanggung jawab untuk mendefinisikan informasi awal dari objek drop, seperti kecepatan, koordinat awal, ukuran, akselerasi, dll.
// konstruktor dropvar drop = function () {// Acak mengatur koordinat awal drop // Pertama pilih elemen jatuh dari sisi mana yang dari var randomEdge = math.random () * 2; if (acak> 1) {this.pos = vektor baru (50 + math.random () * canvas.width, -80); Math.random () * canvas.height);} // Atur ukuran elemen jatuh // nilai acak diambil oleh rentang radius dari fungsi opts yang disebut this.radius = (opts.size_range [0] + matematika.random () * opts.size_range [1]) * dpr; // dapatkan speed () * opts. (Opts.speed [0] + math.random () * opts.speed [1]) * dpr; this.prev = this.pos; // Lipat gandakan sudut dengan 0,017453293 (2pi/360) untuk mengubahnya menjadi radian. var Everyager = 0,017453293; // Dapatkan sudut arah angin wind_anger = opts.wind_direction * setiap setiap; // Dapatkan akselerasi lateral speed_x = this.speed * math.cos (wind_anger); // Dapatkan akselerasi longitudinal, speed_y = - ini.Perbarui metode objek drop
Metode pembaruan bertanggung jawab untuk mengubah atribut dari setiap instance drop frame, seperti mengubah perpindahan.
Drop.prototype.update = function () {this.prev = this.pos.copy (); // Jika ada gravitasi, kecepatan longitudinal akan ditingkatkan if (opts.hasgravity) {this.vel.y += gravity;} // this.pos.add (this.vel);};Metode Draw Object Drop
Metode Draw bertanggung jawab untuk menggambar setiap instance drop frame
Drop.prototype.draw = function () {ctx.beginpath (); ctx.moveto (this.pos.x, this.pos.y); // Saat ini hanya ada dua situasi, satu hujan, mis. Math.abs(this.radius * Math.cos(wind_anger));var ay = Math.abs(this.radius * Math.sin(wind_anger));ctx.bezierCurveTo(this.pos.x + ax, this.pos.y + ay, this.prev.x + ax , this.prev.y + ay, this.pos.x, this.pos.y); ctx.stroke (); // yang lainnya adalah snow---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Bangkitnya objek rebound karena jatuh dan jatuh, yaitu, tetesan air yang rebound dari air hujan di atas, Anda juga dapat berkembang menjadi kerikil atau merokok di tahap selanjutnya
Definisi ini sangat sederhana, jadi saya tidak akan menjelaskannya secara detail di sini
var bounce = function (x, y) {var dist = math.random () * 7; var angle = math.pi + math.random () * math.pi; this.pos = vektor baru (x, y); this.radius = 0.2+ math.random () * 0.8; this.vel = vektor baru (math.coS (maT) * 0,8; this. dist);}; bounce.prototype.update = function () {this.vel.y += gravity; this.vel.x *= 0.95; this.vel.y *= 0.95; this.pos.add (this.vel);}; bounce.prototype.draw = function () {ct.vel);}; bounce.prototype.draw = function () {ct.cpath.); this.pos.y, this.radius * dpr, 0, math.pi * 2); ctx.fill ();};Antarmuka eksternal
memperbarui
Artinya, fungsi start setara dengan seluruh animasi kanvas
function update () {var d = Tanggal baru; // Bersihkan gambar ctx.clearrect (0, 0, canvas.width, canvas.height); var i = drops.length; while (i--) {var drop = drop [i]; drop.update (); // Jika drop instance di bawah ke bawah, Anda perlu dibutuhkan ke bawah, Anda perlu dibutuhkan ke bawah. canvas.height) {// Jika Anda perlu rebound, tambahkan instance bouncing ke array bouncing if (opts.hasbounce) {var n = math.round (4 + math.random () * 4); sementara (n-) memantul. {var bounce = bouncing [i]; bounce.update (); bounce.draw (); if (bounce.pos.y> canvas.height) bounces.splice (i, 1);}} // jika jumlah yang dihasilkan setiap waktu adalah (drops.length <opts.maxnum) {api) {iF. Opts.numlevel; for (; i <len; i ++) {drops.push (drop baru ());}}} // terus menerus loop updateRequestanImframe (update);}init
Init Interface, inisialisasi semua sifat dasar dari seluruh kanvas kanvas, seperti mendapatkan rasio piksel layar, dan mengatur ukuran piksel kanvas, dan mengatur gaya kanvas
function init (opts) {opts = opts; canvas = document.geteLementById (opts.id); ctx = canvas.getContext ("2d"); /// kompatibel dengan piksel canvas high-devas, dan canvas juga harus mengubah dpr = window.devicepixelratio; layar, sehingga panjang dan lebar kanvas artboard harus dikalikan dengan dpr canvaswidth = canvas.clientwidth * dpr; canvasheight = canvas.clientheight * dpr; // setelir dan ketinggian canvas.width = canvaswidth; canvas. setStyle ();} fungsi setStyle () {if (opts.type == "rain") {ctx.linewidth = 1 * dpr; ctx.strokestyle = 'rgba (223,223,223,0.6)'; ctx.fillstyle = 223,223,0.6) '; ctx. 'RGBA (223.223.223,0.6)';} else {ctx.linewidth = 2 * dpr; ctx.strokestyle = 'rgba (254.254.254.0.8)'; ctx.fillstyle = 'rGBA (254.2.8)'; ctx.fillstyle = 'RGBA (254.24.8)';Kesimpulan
Oke, komponen drop sederhana telah selesai, tentu saja, ada banyak hal yang tidak sempurna. Setelah menulis komponen drop ini, untuk implementasi animasi kanvas, saya percaya bahwa ada banyak tempat untuk ditemukan di adegan H5.
Akhirnya, mari kita bicara tentang kekurangan dan pekerjaan di kemudian hari:
0. Tidak ada cukup antarmuka eksternal untuk komponen ini, kisaran yang dapat disesuaikan tidak terlalu besar, dan abstraknya tidak terlalu menyeluruh.
1. Setstyle mengatur gaya dasar
2. Kustomisasi Objek Pembaruan dan Gambar Objek Drop and Bounce memungkinkan pengguna untuk mengatur lebih banyak bentuk dan efek gaya dari kecepatan jatuh dan perubahan ukuran.
3. Antarmuka untuk jeda animasi, operasi akselerasi dan deselerasi harus ditambahkan.
Di atas adalah pengetahuan yang relevan tentang JS dan kanvas yang saya perkenalkan kepada Anda tentang mencapai efek hujan dan salju. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!
Artikel ini direproduksi: http://blog.csdn.net/xllily_11/article/details/51444311