Contoh kode kanvas untuk mengimplementasikan animasi bilah kemajuan melingkar

Artikel ini memperkenalkan penerapan animasi bilah kemajuan melingkar di kanvas dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:

Izinkan saya menunjukkan renderingnya terlebih dahulu, lalu menambahkan kodenya.

animasi bilah kemajuan

Lebar dan tinggi kanvas adalah propertinya sendiri dan harus diatur dalam gaya interline. Jika Anda mengatur lebar dan tinggi dalam gaya, gambar yang Anda gambar akan berubah bentuk.

 <kanvas id=lebar kanvas saya=100 tinggi=100>70%</kanvas>

Ide utama: Rendering terdiri dari tiga lingkaran. Lapisan terluar adalah lingkaran besar dengan tepi hitam, di dalam lingkaran yang mengubah kemajuan bilah kemajuan dan lingkaran dengan persentase yang realistis.

Catatan: Setiap kali sebuah lingkaran digambar, sebuah layer baru harus dibuat, sehingga gaya setiap layer dapat diatur secara independen tanpa mempengaruhi satu sama lain. Sama seperti layer di PS, rancangan desain yang lengkap terdiri dari banyak layer.

 var canvas = document.getElementById(mycanvas);var konteks = canvas.getContext(2d);function draw(i){// Bingkai lingkaran besar konteks.beginPath();context.lineWidth = 1;context.arc(50,50 , 46,0,Matematika.PI*2);context.strokeStyle = abu-abu;context.stroke();// Lingkaran besar konteks.beginPath();var grd = konteks.createLinearGradient(15,15,80,80);grd.addColorStop(0,merah);grd.addColorStop(0.5,kuning);grd.addColorStop(1,biru);context.arc(50,50,38, 0,Matematika.PI*2*(i/100));context.lineWidth = 16;context.strokeStyle = grd;context.stroke();// konteks.fillStyle = grd;// konteks.isi();// lingkaran kecil konteks.beginPath();context.arc(50,50,30, 0,Matematika.PI*2);context.lineWidth = 1;context.strokeStyle = abu-abu;context.stroke();context.fillStyle = putih;context.fill();//Context.beginPath();context.textBaseline = tengah;context.textAlign = center;context.font = 20px Arial;context.fillStyle = hitam;context.fillText(i+%,50 , 50);}

Gunakan metode konteks.clearRect() untuk menghapus kanvas

 var i = 0;var progres = parseInt(canvas.innerHTML);// console.log(progress);var timer = setInterval(function(){if(i >= progres){clearInterval(timer);}context.clearRect (0,0,kanvas.lebar,kanvas.tinggi);draw(i);i++;},50);

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