Artikel ini memperkenalkan kanvas HTML5 untuk mencapai bilah kemajuan melingkar dan menampilkan contoh efek persentase digital.
Mencapai efek
1. Pertama -tama buat kode html
<Canvas ID = Canvas Width = 500 Height = 500 Style = Background:#000;> </an Canvas>
2. Buat lingkungan kanvas
var canvas = document.geteLementById ('canvas'), // Dapatkan konteks elemen kanvas = canvas.getContext ('2d'), // Dapatkan lingkungan gambar, tunjukkan sebagai 2D centerx = canvas.width/2, // Canva Center Titik X -axis Center Koordinat = Canvas.Height/2, // Canvas Center Point Y -axis Koordinat Rad = Math.pi*2/100, // Bagilah 360 derajat menjadi 100 salinan, maka masing -masing adalah derajat RAD Kecepatan = 0,1; / / Muat cepat dan lambat, cukup mengandalkannya3. Gambar 5 piksel lebar lingkaran luar olahraga
// 绘制 5 像素宽的运动外圈 Fungsi BlueCircle (n) {Context.Save (); ); sudut, searah jarum jam/counterclock) context.stroke ();4. Gambarlah cincin luar putih
// GAMBAR FUNGSI LINGGIAN LUAR BIASA PENGETAHUI BIASA () {Context.Save (); , false);5. Persen Teks Gambar
Teks fungsi (n) {Context.Save (); // atur ukuran font dan font // gambar font, dan konteks posisi yang ditentukan gambar.Restore ();}6. Biarkan Latihan
// siklus animasi (function drawframe () {window.requestanimationframe (drawframe); context.clearrect (0, 0, canvas.width, canvas.height); whitecircle (); te xt (kecepatan); bluecircle (speed); If (if (speed> 100) speed = 0; speed+= 0.1;} ());Kode lengkap
<! {Text-Align: Center; Script> window.onload = function () {var canvas = document.geteLementById ('canvas'), // Dapatkan konteks elemen kanvas = canvas.getContext ('2d'), / / / dapatkan lingkungan gambar, tunjukkan pada 2D centerx = canvas.width/2, // canvas center point x -axis cendry = canvas.height/2, // canvas center point y -axis rad = math.pi*2/100, // Bagilah 360 derajat menjadi 100 untuk porsi, setiap bagian adalah kecepatan derajat rad = 0,1; ; .pi/2, -math.pi/2 +n*rad, false); (); // Menggambar konteks. ; ); / Atur gaya gambar gaya gambar.font = 40px. , 10); 0.1;} ());} </script> </body> </html>Di atas adalah semua isi artikel ini.