Kanvas HTML5 mewujudkan bilah kemajuan putaran dan menampilkan contoh efek persentase digital

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 mengandalkannya

3. 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.