Mari kita lihat dulu pengaruh jam partikel, sebagai berikut:
Di bawah ini kita akan mengimplementasikannya melalui Canvas dan js,
Pertama, buat file html dan tambahkan kanvas, sebagai berikut:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Dokumen</title> <style> .container{ margin: 0, lebar otomatis: 600px; ></head><body> <div id=container> <kanvas id=canvas></canvas> </div></body>Selanjutnya import material digit.js. Material tersebut terdiri dari angka-angka menggunakan array dua dimensi, totalnya ada sepuluh karakter: 0-9 dan titik dua, sebagai berikut:
Anda dapat melihat bahwa karakter 1 terdiri dari
Mari mulai membuat kanvas:
fungsi Jam() { var kanvas = document.getElementById(kanvas.lebar = 600; kanvas.tinggi = 100; ini.cxt = kanvas.getContext('2d'); .cxt.fillRect(0, 0, 500, 100);Kode di atas dapat menggambar kanvas kecil berwarna abu-abu di browser
Mari kita mulai analisisnya di bawah ini:
1. Memahami matriks data? Ini adalah array multidimensi
2. Bagaimana cara menggambar lingkaran?
2.1 Apakah Anda perlu mengetahui radiusnya terlebih dahulu?
Terlihat pada gambar di atas, letak pusat lingkaran adalah:
r+1r+1 + (r+1)*2*1r+1 + (r+1)*2*2. . . r+1 + (r+1)*2*saya
Sementara itu, jari-jari juga dapat diperoleh dengan menghitung tinggi lingkaran, sebagai berikut:
Tinggi sebuah lingkaran adalah (r+1)*2, dan tinggi kanvas terdiri dari 10 lingkaran.
Tinggi kanvas = (r+1)*2*10
Jika tinggi kanvas diatur ke 100, maka akan muncul r, pusat lingkaran xy juga akan muncul, dan lingkaran akan mulai digambar.
Pertama, tambahkan pernyataan pada objek Jam di atas untuk menghitung r
ini.r = 100/20-1;
Selanjutnya saya menambahkan metode draw ke prototipe Jam.
Jam.prototipe.draw = fungsi(angka, indeks) { this.cxt.fillStyle=#000; untuk (biarkan i=0; i<digit[angka].panjang; i++) { untuk (biarkan j=0; j< digit[angka][i].panjang; j++) { jika (angka[angka][i][j] == 1) { this.cxt.beginPath(); ini.cxt.arc(indeks*70+(ini.r+1)+(ini.r+1)*2*j, (ini.r+1)+(ini.r+1)*2*i, ini.r, 0, Matematika.PI*2, salah); ini.cxt.closePath(); ini.cxt.fill();draw menerima 2 parameter, yang pertama adalah indeks karakter, yang kedua adalah urutan offset karakter, 70 adalah jarak offset, yang dapat disesuaikan.
For pertama membuat array karakter dirender. For kedua mengambil setiap baris untuk dirender dan hanya merendernya sebagai 1. Parameter untuk menggambar lingkaran sebagian besar adalah x, y, r.
Selanjutnya kita perlu mendapatkan waktunya. Kita bisa langsung mendapatkan waktu dari Tanggal baru menggunakan aturan reguler, sebagai berikut:
Jam.prototipe.getTime = function() { var reg = /(/d)(/d):(/d)(/d):(/d)(/d)/.exec(Tanggal baru()); var data = []; data.push(reg[1], reg[2], 10, reg[3], reg[4], 10, reg[5], reg[6]); i=0; i<data.panjang; i++) { ini.gambar(data[i], i);Anda dapat dengan mudah mendapatkan jam, menit dan detik melalui ekspresi reguler. Saat mendorong array, perhatikan format yang sesuai.
Perhatikan bahwa akan ada masalah dengan lukisan seperti ini, yaitu kanvas tidak dapat disegarkan
kanvas.tinggi= 100
Sekarang Anda dapat menjalankan kodenya, sebagai berikut:
var jam = Jam baru();setInterval(()=>{ jam.getTime(); })Oke, ini tidak apa-apa
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.