Pertama -tama lihat efek drawn, seperti yang ditunjukkan pada gambar di bawah ini, kemajuan berbentuk bulat seperti itu.
Saya menggunakan kanvas HTML5 untuk membuat kemajuan melingkar seperti itu
Yang pertama adalah halaman HTML, dan logo dokumen HTML5 adalah:
<!
Logo dokumen ini jauh lebih sederhana daripada HTML4.
Langkah kedua adalah membuat elemen kanvas kanvas di halaman:
<canvas class = Lebar proses = tinggi 48px = 48px> 61%</canvas>
Saya membuat kanvas dengan panjang 48 piksel dan lebar di sini, karena diameter yang ingin saya gambar adalah 48 piksel, dan 61%elemen kanvas ditulis di tengah. . 61%ini adalah teks yang ditampilkan ketika browser lama tidak mendukung elemen kanvas.
Nah, konten halaman HTML pada dasarnya selesai sejauh ini, dan kemudian saya akan memberikannya kepada JavaScript.
Function drawrocess () {// Pilih semua elemen kelas dari semua kelas pada halaman, dan kemudian mengulangi setiap gambar elemen (di sini dipilih dengan pilihan jQuery) $ ('canvas.process'). Tag Canvas First adalah 61%(metode StringTrim di sini adalah metode saya sendiri. Ada banyak cara untuk pergi sebelum dan sesudah. (Ini $ (ini) .text ()); var proces = text.substring (0, teks. panjang); Gambarlah di kanvas ini, tidak ada kanvas, langkah ini tidak diperlukan. Moveto (24, 24); Konteks searah jarum jam atau berlawanan arah jarum jam (24, 24, 24, 0, Math.pi * 2, false); // *** Lukisan Bundar Abu -abu Selesai // Lukisan Konteks Kemajuan. Beginpath (); bukan konteks berbentuk kipas. Moveto (24, 24); pi * 2 * 2 * Proses, false); 24); ; , diisi, stroke adalah konteks garis gambar. Context.textAlign = er ';Nah, setelah menggambar.
Ukuran: 2,4 kb melihat lampiran gambar
Terima kasih telah membaca, saya berharap dapat membantu semuanya, terima kasih atas dukungan Anda untuk situs ini!