HTML menggunakan kanvas untuk mencapai fungsi rentetan

Baru -baru ini, Anda perlu membuat pemain rentetan saat Anda mengerjakan pekerjaan rumah besar. Saya ingat kode sumber orang lain dan direalisasi ulang, dan demonstrasi adalah sebagai berikut

Kapal

Atur warna, kecepatan, dan jenis rentetan

Tampilkan Barrage

Tidak bisa layar penuh

Kanvas tidak beradaptasi dengan adaptasi

Tidak Ada Kontrol Pemain Kustom

Rentetan yang sesuai tidak ditampilkan sesuai dengan waktu pemutaran

Rentetan tidak bisa ditangguhkan

Cacat yang diketahui akan ditingkatkan di masa depan. Kode sumber pemain rentetan yang dapat ditemukan di internet umumnya hanya membuat rentetan rolling tanpa rentetan statis.

Inti dari seluruh pemain adalah menggambar teks dan membuat animasi bergulir teks.

Pertama tambahkan tag video video dan kabel kanvas dalam file html

 <Div ID = Barrageplayer> <Canvas ID = CV_Video Width = 900px Tinggi = 450px> </an Canvas> <Video ID = V_Video SRC = Test.mp4 Controls = Video/MP4>/Video> </div>

Tetapkan gaya posisi tag kanvas ke positif: absolute dan kemudian video dan kanvas tumpang tindih bersama. Kemudian tambahkan konten rentetan ke kanvas.

 var c = document.getElementById (cv_video); ; , spey) {this.content = content if (this.type == statis top) {this.head = parseInt ((c_height/2) -math.random ()*c_height/2) +10;} lain jika (this.type == static tom) {this .Height = parseInt ((c_height/2) +math.random ()*c_height/2) +10;} if (typeof this.move! = Function) {Barrage.prototype.move. type == default) {this.left = this.left-this.speed;}}}}}

Objek rentetan yang dibangun menginisialisasi berbagai parameter, termasuk konten, warna, jenis gerakan dan kecepatan, mendefinisikan metode Move () untuk mengontrol gerakan rentetan, setiap metode bergerak () menggulung kecepatan satuan ke kiri setiap kali untuk kiri Metode kiri ke kiri

Setelah konstruktor objek rentetan selesai, tema dimasukkan, produksi animasi, langsung pada kode

 // lingkaran dan kanvas untuk mencapai efek animasi setInterval (function () {ctx.clearrect (0,0, c_width, c_height); ctx.save (); untuk (var i = 0; i <msgs.length; i + +) {) {) {if (msgs [i]! = null) {if (msgs [i] .type == default) {handledeFault (msgs [i]);} else {handlestate (msgs [i]); }}}}, 20)

Jalankan setiap 20ms, ctx.clearrct (0,0, c_width, c_height); Hapus seluruh kanvas saat ini, dan kemudian simpan kanvas saat ini dengan ctx.save (), dan kemudian melintasi daftar rentetan (MSGS adalah MSGS adalah The The the the Daftar rentetan, ketika rentetan dikirim, instance rentetan akan ditambahkan ke daftar), dan kemudian diproses secara terpisah sesuai dengan rentetan gaya default atau gaya statis. Jika itu adalah rentetan gaya default, itu akan diproses sesuai dengan metode berikut

 // PROSES FUNGSI GAYA BARRAGE DEFAULT HADLEDEFAULT (BARRAGE) {if (barrage.left == tidak terdefinisi || barrage.left == null) {barrage.left = c.width;} else (Barrag E.Left <-200) {Barrage = null;} else {barrage.move () ctx.fillstyle = Barrage.color;

Pertama -tama, jika instance rentetan tidak mengatur atribut kiri, lebar kanvas diberikan kepadanya. dari instance rentetan untuk mengubah nilai atribut kiri kemudian mengatur warna teks, menulis teks baru di level pertama, dan mengembalikan kanvas. Ini melengkapi bingkai animasi.

Metode implementasi rentetan statis adalah sebagai berikut

 // Perawatan Fungsi Gaya Barrage Statis (Barrage) {CTX.Moveto (C_WIDTH/2, Barrage.height); 2. Barrage.height); (Xt (, c_width/2, barrage.height); barrage = null; // ctx. Store (); ctx.clearrect (0,0, c_width, c_height);} else {barrage.left = barrage.left-6 ;}}

Pertama -tama, titik dasar kanvas dipindahkan ke tengah kanvas. ke kanvas ini. Kemudian atur perataan teks ke perataan tengah, atur gaya teks, dan isi teks. Karena rentetannya statis, tidak perlu memperlambat, tetapi rentetan statis juga akan hilang. Agar tidak menempati atribut tambahan di sini, kami langsung menggunakan atribut kiri sebagai posisi logo, yang juga mengurangi atribut kiri. Dengan cara ini, pemrosesan rentetan statis direalisasikan.

Orang lain yang memiliki fondasi tertentu tentang pengaturan warna dan gaya harus mudah dikuasai dan tidak memperkenalkannya di sini.

Proyek ini terutama menggunakan kanvas untuk menggambar teks dan animasi teks yang lambat.

 Canvasdom.getConoText () canvas.save () /canvas.restore () canvas.clearrect () canvas.moveto ()

Ternyata saya tidak dapat memahaminya dengan save () dan restore (). Sebelum memodifikasi keadaan kanvas. Seperti ketika saya menangani rentetan statis, titik dasar kanvas telah diubah, sehingga metode clearance dari kanvas asli tidak lagi berlaku untuk kanvas saat ini. Kemudian kembali ke kanvas asli.

Kode berjalan

 <! UAA -Compatible Content = IE = Edge> <Title> Dokumen </itel> </head> <style type = Text/CSS> .PickDiv {Width: 30px; inline-black;} #white {background: white;} #red {latar belakang: #ff6666;} #yellow {latar belakang: #ffff00;} #blue { #3333399;} #green {latar belakang: #339933;} #cv_video { Posisi: Z-index: 1;} #barrageplayer {posity: terkait: blok ;} </style> <body> <v id = Barrageplayer> <mvas id = cv_video width = 900px tinggi = 450px> </an canvas> <video id = v_video src = test .mp4 mengontrol tipe = video/mp4> </v_video = Test .mp4 type = video/mp4> Video> </div> <Div ID = BarrageInput> <SEV> <Input Type = Text ID = SMSG Placeholder = Harap masukkan konten Barrage/> <tombol ID = Kirim> </button> </div> <div id = ColorPick> <div class = pickDiv id = white> </div> <div class = pickDiv id = red> </div> <div class = pickDiv id = yellow> </div> </div> div class = pickDiv ID ID = Blue> </div> <div class = pickDiv id = green> </div> </div> <div id = typePick> <input type = radio name = type = defaul t> secara default <input type = radio nama radio = radio = Jenis Nilai = Top Statis> Top Statis <Jenis Input = Nama Radio = Jenis Nilai = Bottom Statis> Bottom Statis </Div> <Div ID = SpeedPick> <Input Type = Radio Name = Nilai Kecepatan = 1> 1x <Jenis Input = nama radio = nilai kecepatan = 2> 2x <input type = nama radio = nilai kecepatan = 3> 3x </div> <div id = stylePick> </div> <script> var c = document.geteLementById (cv_video); Var typedom =getElementsbyname (type); 1; addeventristener ('klik', fungsi) {switch (event.target.id) {case white: color = white; Warna = 339933; panjang; Speeddom [i] .Checked) {speed = 2*ParseInt (speeddom [i]. Nilai); ;} // // Fungsi bagian rentetan // // objek rentetan (konten, warna, ketik, kecepatan) {this.content = konten; = Kecepatan; if (this.type == default) {this.height = paraseint (math.random ()*c_hei ght) +10;} lain jika (this.type == statis top) {this.head = ParseInt ((c_height/2) -math.random ()*c_height/2) +10;} lain jika (this.type == static bottom) {th is .height = parseInt ((c_height/2) +math.random ()*c_height/2) +10;} if (typeof this.move! = function) {Barrage.prototype.move = fuins {if (type. speed;}}} // Lingkari kanvas dari efek animasi setInterval ;; Null) {if (msgs [i] .type == default) {handledeFault (msgs [msgs [i]);} else {handlestatic (msgs [i]);}}, 20) // memproses gaya rentetan default default [i]); fungsi handledeFault (barrage) {if (barrage.left == tidak terdefinisi || barrage.left == null) {barrage.left = c.width;} else {if (barrage.left <-200) {barrage = null;} else {barrage.move () ctx.fillstyle = Barrage.color; {ctx.moveto (c_width/2, barrage.height); Kiri == Tidak Ditentukan || = null; //ctx.Restore ();

Di atas adalah HTML yang diperkenalkan oleh editor kepada Anda untuk menggunakan Canvas untuk mengimplementasikan fungsi rentetan. Terima kasih banyak atas dukungan Anda untuk situs web VEVB Wulin!