PREFACE: Saya selesai membaca buku kanvas Canvas of JS hari ini. Saya sangat senang ~ saya kanvas kesayangan saya lagi ~ ouye ~
Saya melihat seseorang menyarankan saya untuk menggambar pria gemuk biru sebelumnya, ya, mengapa saya melupakan pria gemuk biru favorit yang saya miliki di masa kecil saya? Untuk mengekspresikan permintaan maaf saya kepada pria gemuk biru, saya menggambar hello world hari ini, yang juga merupakan semacam perbaikan ~
Oke, silakan pergi ke dalam untuk penumpang. Tolong jangan memblokir bagian ini, terima kasih. Ayo mengemudi ~
teks:
Mari kita ambil gambar hari ini dan lihat efeknya
Hari ini, pria biru gemuk itu terlihat seperti ini, dan saya merasa lega melihat bahwa dia masih sangat gemuk. Dunia ini masih penuh dengan energi positif, dan masih ada orang yang lebih gemuk dari saya, hahahaha
Lalu kode
bagian html
<canvas id = "mycanvas"> GO dan tingkatkan browser Anda ~ </ Canvas>
Bagian JS
window.addeventListener ("muat", function () {// Dapatkan konteks kanvas var context = document.getElementById ("myCanvas"). getContext ("2d"); // menilai apakah konteksnya ada, jika ada banyak konteks. dari jam // gambar lingkaran besar di luar konteks.arc (100,100,99,0,2*math.pi, false); // isi konteks.fillstyle = "#315f9b"; context.fill (); // Gambarlah edge dari Circle CLOBE.STROKE (); // MULAI subpath baru, // Ini diperlukan, jika tidak, pengisian Lingkaran. Point to (194.100), dan Hitung Poin Konteks.Moveto (194.100); // Gambar lingkaran kecil di dalam (bundar dewa?) Context.arc (100,100,94,0,2*Math.pi, false); // Isi lingkaran kecil di dalam dengan konteks warna biru muda yang terlihat bagus. Manusia muncul ~ // Buat objek gambar dan atur src ke gambar pria lemak biru var gambar = gambar baru (); gambar.src = "2.png"; // Gunakan penarikan metode konteks untuk menggambar gambar dari titik (25,25), dan menggambarnya dalam persegi panjang dengan panjang 40.10. (100.100) Sebagai asal baru, yaitu (0,0) Context.translate (100.100); // Gambar konteks waktu kami. Situations.FillText ("12",-5, -80); Context.FillText ("6",-4,87); Context.FillText ("3", 80,1); Context.FillText ("9",-86,1);//Lihat lebih banyak detail tentang fungsi ini sekarang (konteks);}, false);Panggilan jam di atas muncul, tetapi alasan paling penting mengapa jam adalah jam adalah karena dapat menampilkan waktu (omong kosong), jadi langkah selanjutnya adalah menggambar pointer.
sekarang bagian fungsi
function nowTime(context){//Create a date object to get the local time var myDate = new Date();//Get hours, minutes, seconds var myHour = myDate.getHours();//Convert hour to 12-hour format if(myHour >= 12){myHour = myHour-12;}var myMin = myDate.getMinutes();var mySec = mydate.getSeconds (); // Jelaskan jam // Gunakan untuk menyimpan radian jam saat ini pada dial var hourarc; // gunakan 3 jam sebagai titik awal keliling, mewakili radian searah jarum jam jika (myhour <3) {hoLarc = 2*math.pi- (3-myhour)*math.pi/6; (myHour-3)*Math.PI/6;}//When pointing to 3, 6, 9, 12, it is exactly a multiple of 90°//There is a deviation from the angle converted to radians, so special treatment is given to switch(myHour){case 0:hourArc = Math.PI*3/2;break;case 3:hourArc = 0;break;case 6:hourArc = Math.PI/2;break;case 9: hampharc = math.pi; break;} // Panggilan fungsi drawtime dan drawtime (konteks, hourarc, 60); // Draw Minutes // Gunakan radian var minarc pada dial menit saat ini pada dial; // Gunakan 15 menit sebagai titik awal keliling untuk mewakili radian searah jarum jam jika (mymin <15) {minarc = 2*math.pi- (15-mymin)*math.pi/30;} else {minarc = (mymin-15)*math.pi/30;} // risalah pemrosesan, masih ada di sini karena masih di sini karena minarc {Minon-5) switer {Minarc (MINMIN-15) {MinARC (MINMIN-5PI/30; Math.pi*3/2; Break; Case 15: Minarc = 0; Break; Kasus 30: Minarc = Math.pi/2; Break; Case 45: Minarc = Math.pi; Break;} // Call Drawtime Function dan Drawtime (Konteks, Minarc, 80); // Gambar Detik // Gunakan detik saat ini untuk menyimpan Radian Var Varc pada dialkal; if (mysec <15) {secarc = 2*math.pi- (15-mysec)*math.pi/30;} else {secarc = (mysec-15)*math.pi/30;} // pemrosesan untuk detik, masih di sini karena sudut yang dikonversi ke radian dan ada deviasi, pemrosesan khusus saya sakelar (my. 14:secArc = 0;break;case 29:secArc = Math.PI/2;break;case 44:secArc = Math.PI;break;}//Call drawTime function and drawTime(context,secArc,80,"red");//Set a timeout call function, call nowTime for every second timeout call nowTime to update the clock setTimeout(function(){//Before calling to draw a new pointer, of course, you should clear the original hour hand. Gunakan fungsi ClearTime, sangat mudah digunakan!Jadi, bagaimana kita secara khusus menggambar petunjuk saat kita mengoperasikan konteksnya? Saya juga tidak tahu, jadi mari kita akhiri hari ini ~
Hanya bercanda, hehe, santai saja (harus berpura -pura aku akan mengacaukanmu)
Berikutnya adalah fungsi drawtime, yang memiliki empat parameter secara total (konteks, thearc, thelength, color = "#000"). Konteks melihat melalui konteks yaitu kanvas pada pandangan pertama, thearc adalah sudut di mana kita ingin memutar kanvas, panjangnya mewakili panjang pointer, dan warna adalah warna pointer.
Fungsi Drawtime (konteks, thearc, thelength, color = "#000") {// Simpan lingkungan kanvas saat ini dan menggunakannya dalam hubungannya dengan metode pemulihan untuk mengembalikan konteks kanvas. context.beginpath (); // pindahkan titik awal ke (0,0) context.moveto (0,0); // Gambar jalur ke (thelength, 0); // Gambar jalur ini dengan konteks warna warna yang ditentukan. Jika Anda ingin melihat jalan setapak, Anda perlu menggunakan stroke untuk melacak garis. Cara melacak baris ini dapat ditentukan oleh beberapa atribut yang kami gunakan di atas; // mengembalikan konteks konteks.restore ();}Meskipun akan segera berakhir, ada juga fungsi ClearTime yang sangat penting. Tanpa itu, jam Anda akan ditempati oleh detik yang padat. Kita semua memiliki tanggung jawab untuk merawat pasien dengan fobia intensif.
fungsi cleartime (konteks) {// Kami memulai subpath baru, dan kemudian menggambar lingkaran penuh biru yang indah, mencakup pointer yang kami ambil sebelumnya, yang setara dengan membersihkan konteks dial.beginpath (); context.arc (0,0,80,0,2*Math.pi, false); context.fillstyle = "#4BAI kami. Cedera karena kecelakaan, jadi panggil lagi, dan itu akan menjadi Anda, pikachu (? huh) var gambar = gambar baru (); gambar.src = "2.png"; // Koordinat ini berbeda dari koordinat yang dimuat untuk pertama kalinya, karena kami memodifikasi matriks transformasi, apakah Anda masih ingat? Oleh karena itu, koordinat mereka harus merupakan konteks komplementer.Nah, oke, sudah benar -benar di sini sekarang, hampir waktunya pergi makan ~ programmer lucu yang terkasih, ingatlah untuk makan ~