Contoh kode untuk komponen hitung mundur cincin kanvas

Penulis：Eve Cole Waktu Pembaruan：2025-01-24 00:12:01

Artikel ini memperkenalkan kode contoh komponen hitung mundur cincin kanvas dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:

Efeknya seperti yang ditunjukkan pada Gambar 1:

Komponen hitung mundur cincin kanvas

Hitung mundur cincin kanvas adalah hitungan mundur yang diterapkan berdasarkan Canvas dan direkomendasikan untuk digunakan pada perangkat seluler.

Alamat unduhan hitung mundur cincin kanvas

1. Cara menggunakan

1. kode html

Atribut ID dapat diberi nama secara sewenang-wenang

 <kanvas id=kanvas></kanvas>

2. Perkenalkan file process.js

Referensi halaman

 <skrip src=js/proses.js></skrip>

3. Parameter inisialisasi

Buat contoh saja

 <skrip> window.onload = fungsi () { biarkan ctd = Hitung Mundur baru(); ctd.init();

2. Deskripsi parameter pengaturan

Parameter berikut tidak diperlukan dan dapat dikonfigurasi sesuai kebutuhan spesifik.

 window.onload = function() { let ctd = new Countdown(); ctd.init({ id: kanvas, // ID, kanvas harus memiliki atribut ID ukuran: 130, // Ukuran maksimum untuk menggambar lingkaran, lebar = Batas tinggiLebar: 4, // Lebar batas batasWarna: #fff, // Warna batas luarWarna: #fff, // Jadwal warna lingkaran terluarWarna: #fff, // Warna animasi bilah kemajuan fontWarna: #fff, // Warna cincin warna font: #ffc720, // Warna cincin bilah kemajuan warna dalam: #4e84e5, // Warna latar belakang lingkaran paling dalam ukuran font: 50, waktu: 5 });

3. Contoh kode

html

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Judul</title> <style> body { latar belakang: #c2c1ce; } .container { posisi: absolut; 50%; atas: 50%; transformasi: terjemahan(-50%, -50%); tengah; } </style></head><body><div class=container> <kanvas class=canvas id=canvas></canvas></div><script src=js/process.js></script ><skrip> window.onload = function () { biarkan ctd = new Countdown(); ctd.init(); </script></body></html>

 /** * Dibuat oleh Tan Xi pada 15/3/2018 */function Countdown() { // Tetapkan parameter default this.settings = { id: canvas, // ID, canvas harus memiliki atribut ID size: 130, //Ukuran maksimum untuk menggambar lingkaran, lebar = tinggi lebar tepi: 4, // Lebar tepi tepiWarna: #fff, // Warna tepi luarWarna: #fff, // Jadwal warna lingkaran bawah terluarWarna: #fff, // warna animasi bilah kemajuan fontWarna: #fff, // warna cincin warna fontWarna: #ffc720, // warna cincin bilah kemajuan warna dalamWarna: #4e84e5, // warna latar belakang lingkaran paling dalam ukuran font : 50, waktu: 5 }}Hitung mundur.prototipe.init = fungsi (opt) { this.obj = dokumen.getElementById(ini.pengaturan.id); ini.obj.lebar = ini.pengaturan.ukuran; ini.obj.tinggi = ini.pengaturan.ukuran; ini.ctx = ini.obj.getContext(2d); this.settings, opt); this.countdown();};//Gambar warna latar belakang Countdown.prototype.drawBackground = function () { this.drawCircle(0, 360, 0, this.settings.outerColor);};// Menggambar latar belakang animasi bilah kemajuan Countdown.prototype.drawProcess = function () { this.drawCircle(0, 360, 4, this.settings.ringColor);};/ / Menggambar hitung mundur Countdown.prototype.drawInner = function () { this.drawCircle(0, 360, 23, this.settings.innerColor); this.strokeBorder(this.settings.borderWidth);};// Menggambar animasi bilah kemajuan Countdown.prototype.drawAnimate = function () {// Sudut rotasi let deg = Math.PI / 180; v = jadwal * 360, startAng = -90, endAng = -90 + v; this.ctx.beginPath(); this.ctx.moveTo(ini.pengaturan.ukuran / 2, ini.pengaturan.ukuran / 2); ini.ctx.arc(ini.pengaturan.ukuran / 2, ini.pengaturan.ukuran / 2, ini.pengaturan.ukuran / 2 -3, startAng * derajat, endAng * derajat, false); this.ctx.fillStyle = this.settings.scheduleColor; this.ctx.fill(); this.ctx.closePath();};//Gambar batas Countdown.prototype.strokeBorder = function (borderWidth) { this.ctx.lineWidth = borderWidth; this.ctx.strokeStyle = this.settings.borderColor; stroke();};// Menggambar teks Countdown.prototype.strokeText = function (teks) { this.ctx.textAlign = center; this.ctx.textBaseline = tengah; this.ctx.font = this.settings.fontSize+px+ microsoft yahei; this.ctx.fillStyle = this.settings.fontColor; 2, this.settings.size / 2);};// Menggambar lingkaran Countdown.prototype.drawCircle = function (startAng, endAng, border, fillColor) { let deg = Math.PI / 180; this.ctx.beginPath(); this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -perbatasan, startAng * derajat, endAng * derajat, false); this.ctx.fillStyle = fillColor; this.ctx.closePath();};//Animasi bilah kemajuan Countdown.prototype.countdown = function () { let oldTime = +new Date(); waktu * 1000,// Misalnya, 30*1000=30 000 md Waktu saat ini = +Tanggal baru(); Ukuran langkah = (waktu saat ini - waktu lampau) / jumlah total detik jadwal = (waktu saat ini - waktu lama) / allMs; this.schedule = jadwal this.drawAll(jadwal); Gambar ulang this.drawBackground(); this.drawProcess(); this.drawAnimate(); clearInterval(timer); } }, 100);};// Gambar semua Countdown.prototype.drawAll = function (jadwal) { jadwal = jadwal >= 1 : jadwal biarkan teks = parseInt(ini.settings.waktu * (1 - jadwal)) + 1; // Hapus kanvas this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.drawInner(); this.strokeText(text);};//Fungsi penyalinan objek extend(obj1,obj2){ for(biarkan attr masuk obj2){ obj1[attr] = obj2[attr];

4. Pekerjaan persiapan kanvas tambahan

Faktanya, kanvas tidak begitu misterius. Ini tidak lebih dari sebuah tag H5, sama seperti tag HTML lainnya:

 <kanvas id=kanvas></kanvas>

Perhatikan bahwa yang terbaik adalah mengatur lebar dan tinggi kanvas di awal (jika lebar dan tinggi tidak disetel, browser akan menyetel ukuran kanvas secara default ke lebar 300 piksel dan tinggi 100 piksel), dan itu tidak bisa. atur menggunakan css (akan ditarik ekstensinya), disarankan untuk menulis langsung di dalam tag kanvas:

 <kanvas id=lebar kanvas=130 tinggi=130></kanvas>

Canvas sendiri tidak memiliki kemampuan menggambar apa pun, dan semua pekerjaan menggambar diimplementasikan melalui js. Biasanya kita menggunakan getElementById di js agar kanvas dapat dioperasikan (artinya kita harus menyetel id untuk kanvas):

 var c = document.getElementById(kanvas);var ctx = c.getContext(2d);

1. Setelah menyiapkan kuas, Anda dapat mulai menggambar. Cincin sebenarnya adalah lingkaran konsentris dengan jari-jari berbeda. Koordinat pusatnya adalah (ukuran/2, ukuran/2). .

 let deg = Math.PI / 180; //beginPath() dapat mengisolasi efek gambar jalur dan mencegah kontaminasi efek sebelumnya. ctx.beginPath();// tcx.arc(derajat tengah lingkaran, 360 * derajat, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();

2. Mulailah menggambar lingkaran bawah berwarna kuning yang kedua, pusat lingkarannya juga (size/2, size/2), namun jari-jarinya 4px lebih kecil dari lingkaran bawah berwarna putih, jadi jari-jari lingkaran bawah berwarna kuning adalah (size /2-4)

 let deg = Math.PI / 180; //beginPath() dapat mengisolasi efek gambar jalur dan mencegah kontaminasi efek sebelumnya. ctx.beginPath();//tcx.arc(pusat lingkaran 0* derajat, 360 * derajat, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();

3. Mulailah menggambar lingkaran dalam berwarna biru, dengan pusat lingkaran (ukuran/2,ukuran/2) dan jari-jarinya (ukuran-23), lalu tambahkan batas putih 4px ke dalamnya.

 let deg = Math.PI / 180; //beginPath() dapat mengisolasi efek gambar jalur dan mencegah kontaminasi efek sebelumnya. ctx.beginPath();// tcx.arc(pusat lingkaran 0* derajat, 360 * derajat, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();// Batas putih ctx.lineWidth = 4;ctx.strokeStyle = #fff;ctx.stroke();

4. Gambar teks dan letakkan di tengah secara vertikal

 ctx.textAlign = center;ctx.textBaseline = tengah;ctx.fillStyle = #fff;// ctx.fillText (teks, koordinat X relatif terhadap kanvas, koordinat Y relatif terhadap kanvas) ctx.fillText(30, ukuran / 2 , ukuran / 2);

5. Bagaimana cara membuat animasi? Sebenarnya itu juga merupakan proses menggambar lingkaran putih, yaitu proses menutupi progres bar kuning secara perlahan, kemudian menggambar lingkaran putih terlebih dahulu, pada saat ini lingkaran biru akan ditutupi oleh lingkaran animasi putih , lingkaran biru terakhir akan digambar baik-baik saja.

 let deg = Math.PI / 180;ctx.beginPath();// tcx.arc(pusat lingkaran X, pusat lingkaran Y, jari-jari, sudut awal, sudut akhir, searah jarum jam dan berlawanan arah jarum jam);ctx.arc(ukuran / 2, ukuran / 2, ukuran / 2-4, 0* derajat, 360 * derajat, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();

6. Proses pengecatan yang relatif sederhana selesai. Selanjutnya, kita perlu mengasosiasikan animasi dengan angka. Menggunakan waktu terkini - waktu paling awal, lalu membagi total waktu, kita bisa mendapatkan persentase kuncinya perubahan angka dan sudut di mana lingkaran animasi putih digambar.

 Countdown.prototype.countdown = function () { biarkan oldTime = +new Date(); // Waktu yang lalu: 1522136419291 timer = setInterval(() => { biarkan currentTime = +new Date(); // Waktu saat ini: 1522136419393 biarkan allMs = ini.pengaturan.waktu * 1000;// Total waktu dalam detik: seperti 30*1000=30 000ms schedule = (currentTime - oldTime) / allMs; // Persentase penarikan: (1522136419393-1522136419291) / 30000 = 0,0204 this.schedule = schedule; this.drawAll(schedule); if (waktu saat ini - waktu lama >= semuaMs) {// Gambar ulang this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.drawInner(); this.strokeText(0); clearInterval(timer); .prototype.drawAll = function (jadwal) { jadwal = jadwal >= 1 : jadwal; biarkan teks = parseInt(ini.pengaturan.waktu * (1 - jadwal)) + 1; // Hapus kanvas this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); this.drawBackground(); ( ); this.drawInner(); this.strokeText(text);};// Menggambar animasi bilah kemajuan Countdown.prototype.drawAnimate = function () {// Sudut rotasi biarkan deg = Math.PI / 180; misalkan v = jadwal * 360, startAng = -90,//Sudut awal endAng = -90 + v;//Sudut akhir this.ctx.beginPath(); .ukuran / 2, ini.pengaturan.ukuran / 2); ini.ctx.arc(ini.pengaturan.ukuran / 2, ini.pengaturan.ukuran / 2, this.settings.size / 2 - 3, startAng * deg, endAng * deg, false); this.ctx.fillStyle = this.settings.scheduleColor; this.ctx.fill(); ;

Versi berorientasi proses

 /** * Animasi bilah kemajuan*/ hitung mundur: function () { this.getSystemInfo().then(v => { // Adaptif biarkan lebar = v.windowWidth, ukuran = lebar >= 414 ? 66 : 400 / 414 * 66; ukuran = parseInt(ukuran); ukuran = ukuran % 2 ? ukuran + 1 : ukuran; biarkan maxtime =30, sTime = +Tanggal baru, suhu = setInterval(() => { biarkan waktu = maxtime * 1000, currentTime = +Tanggal baru, jadwal = (currentTime - sTime) / waktu; this.drew(jadwal, maxtime, ukuran); if (currentTime - sTime >= waktu ) { // Menggambar teks this.setData({ jadwal: 0 }); clearInterval(temp }; draw*/ draw: fungsi (jadwal, val, ukuran) { ukuran = ukuran ||.66; const _ts = ini; jadwal = jadwal >= 1 : jadwal biarkan teks = parseInt(val - val * jadwal), r = ukuran / 2, deg = Math.PI / 180; Hapus kanvas ctx.clearRect(0, 0, size, size); // Gambarlah latar belakang putih ctx.beginPath(); = ' rgba(255,255,255,1)'; ctx.closePath(); Gambarlah warna oranye ctx.beginPath(); ctx.arc(r, r, r - 2, 0 * derajat, 360 * derajat); ctx.fillStyle = 'rgba(248,200,80,1)'; ctx.fill(); // Gambar bilah kemajuan berwarna putih biarkan v = jadwal * 360; ctx.moveTo(r, r); ctx.arc(r, r, r, -90 * derajat, (-90 + v) * derajat); ctx.fillStyle = 'rgba(255,255,255,1)'; (); ctx.fill(); // Tengahkan bagian bawah berwarna biru ctx.beginPath(); r - 12, 0 * derajat, 360 * derajat); ctx.fillStyle = 'rgba(90,140,220,1)'; ctx.closePath(); Gambar terpadu ctx.draw();

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.