Contoh artikel ini menjelaskan metode JS+HTML5 untuk menggambar jam web. Ini menggambar jam dengan pendulum yang dapat digunakan pada halaman web. Ini dapat disesuaikan dalam ukuran dan posisi melalui tombol. Konten implementasi spesifik adalah sebagai berikut.
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <itement> jam </iteme> <script type = "text/javascript"> var xclock = 300; // posisi tengah var yclock = 250; // Posisi tengah var d = 180.0; // Radius tengah dari permukaan lingkaran jam nilai var nilai = -d*1.07; fungsi memperbesar () {d ++;} function reduksi () {d-;} fungsi ke barat () {var c = document.getElementById ("mycanvas"); var g2d = c.getContext ("2d"); g2d.translate (-1,0); // Atur asal sumbu di tengah tabel c = document.geteLementById ("mypendulum"); g2d = c.getContext ("2d"); g2d.translate (-1,0); // atur asal sumbu di tengah tabel c = document.geteLementById ("myCanvas"); var g2d = c.getContext ("2d"); g2d.translate (1,0); // Atur asal sumbu di tengah tabel c = document.geteLementById ("mypendulum"); g2d = c.getContext ("2d"); g2d.translate (1,0); // Atur sumbu yang berasal dari tengah fungsi tabel} ke atas () {var c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); g2d.translate (0, -1); // Atur sumbu yang berasal dari tengah tabel c = document.geteLementById ("mypendulum"); g2d = c.getContext ("2d"); g2d.translate (0, -1); // Atur sumbu yang berasal di tengah fungsi tabel} ke bawah () {var c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); g2d.translate (0,1); // Atur sumbu yang berasal dari tengah tabel c = document.geteLementById ("mypendulum"); g2d = c.getContext ("2d"); g2d.translate (0,1); // Atur sumbu yang berasal dari tengah tabel} fungsi fillpolygon (a, b, fillcolor, ctx) {ctx.beginpath (); ctx.moveto (a [0], b [0]); untuk (var j = 1; j <a.length; j ++) ctx.lineto (a [j], b [j]); ctx.closePath (); ctx.fillstyle = fillColor; ctx.fill ();} function randomColor () {var S = "#" untuk (var i = 0 Math.floor (math.random ()*16) .tostring (16); return s;} function locateCoordinate () {var c = document.geteLementById ("myCanvas"); var g2d = c.getContext ("2d"); g2d.translate (xclock, yclock); // Atur sumbu koordinat berasal dari tengah tabel var c = document.geteLementById ("mypendulum"); var g2d = c.getContext ("2d"); g2d.translate (xclock, yclock); // Atur sumbu koordinat yang berasal dari tengah tabel} function drawface () {// Tentukan metode drawface pada permukaan jam/* array dengan ukuran yang lebih kecil dari koordinat verteks tanda berlian yang mewakili 1, 2, 4, 5, 7, 8, 10, 11,/var x = array baru (0, matematika. var y = new Array( Math.round(-d*1.07),-d,Math.round(-d*0.9),-d);/* Array of vertex coordinates of a larger size representing the positions of 3, 6, 9, and 12 o'clock*/var x1= new Array(0,Math.round(d/15), 0,Math.round(-d/15));var y1 = new Array (math.round (-d*1.13),-d, math.round (-d*0.9),-d); var c = document.geteLementById ("myCanvas"); var g2d = c.getContext ("2d"); // beginpath (); g2d.arc (0,0, d, 0, 2*math.pi); g2d.strokestyle = "lightgray"; g2d.linewidth = d/18; g2d.stroke (); // Stroke terakhir, gambar tepi lingkaran jam // mulai bersiap untuk menggambar berlian yang mewakili setiap jam untuk (var i = 0; i <12; i ++) {// Untuk badan loop dari pernyataan loop dimulai jika (i%3 == 0) {// Gambarlah dengan ukuran merah yang lebih besar, "gak -gon," gak -gon, "gak -gon," gak -gon, "gober," gober, ") {) {) Red Diamond," gak 1, "gak 1," gober), gakon, "gak 1," gober), gakon, "gober," gober, "gober,") {) {) red Diamond, "gobr1," g2, "gober," gober ";" } else {// Gambarlah berlian oranye yang lebih kecil untuk mewakili jam sisa fillpolygon (x, y, "oranye", g2d); } // Ambil pusat jam sebagai asal, dan sistem koordinat berputar searah jarum jam sebesar 30 derajat untuk menggambar tanda berlian dari posisi jam berikutnya G2D.Rotate (Math.pi/6.0); }//For loop body end of the loop statement}//DrawFace method end of the clock surface/* Method for defining the hour hand, minute hand, and second hand of the clock drawNeedles* formal parameter Hradian, unit radian, is the radian position of the hour hand calculated from 0 points, * formal parameter Mradian, unit radian, is the radian position of the minute hand calculated from 0 minutes, * formal parameter Sradian, unit Radian, adalah posisi radian dari tangan kedua yang dihitung dari 0 detik. */Fungsi DrawNeedles (Hradian, Mradian, Sradian) {var c = document.getElementById ("myCanvas"); var g2d = c.getContext ("2d"); // Ambil clock center sebagai asal, dan putar hradian radian searah jarum jam untuk menggambar jam tangan g2 hrotate (hrada hrotate (hrotate hrotate hrotate (hrotate hrotate hrotate (hrotate hrotate hrotate hrotate. // Atur koordinat yang mewakili simpul poligon dari jam tangan var hx = array baru (0, math.round (d/19), 0, math.round (-d/19)); var hy = array baru (math.round (-d/2), math.round (-d/3), 0, math.round (-d/3)); fillpolygon (hx, hy, "magenta", g2d); // atur jam tangan ke ungu-merah, // ambil clock center sebagai asal, dan putar radian hradian berlawanan arah jarum jam untuk mengembalikan sistem koordinat G2D.rotate (-hradian); // Ambil clock center sebagai asal, dan putar Mradian Radian searah jarum jam untuk menggambar tangan G2D.Rotate (Mradian); // Array koordinat yang mewakili titik poligon dari tangan menit var mx = array baru (Math.round (-d/19), 0, Math.Round (d/19)); var my = array baru (0, math.round (-d/1.3), 0); fillpolygon (mx, my, "grey", g2d); // atur tangan menit ke abu-abu // ambil jam sebagai asal, dan sistem koordinat memutar radian mradian berlawanan arah jarum jam untuk mengembalikan sistem koordinat g2d.rotate (-mradian); // Ambil jam sebagai asal, dan sistem koordinat memutar Radian searah jarum jam Sradian untuk menggambar G2D. Rotate (Sradian); // tangan kedua ke warna acak g2d.strokestyle = 'green'; g2d.linewidth = "1"; g2d.moveto (0,0); g2d.lineto (0, math.round (-d/1.1)); g2d.stroke (); g2d.beginpath (); g2d.arc (0, math.round (-d), d/18, 0, 2*math.pi); g2d.fillstyle = randomColor (); g2d.fill (); // Untuk stroke terakhir, gambar bola kecil di titik tangan kedua // ambil bagian tengah jam sebagai asal, dan putar Sradian Radian berlawanan arah jarum jam untuk mengembalikan sistem koordinat G2D.Rotate (-sradian); } // blok kode dari metode jarum gambar drawneedles/* menggambar string untuk mewakili waktu instan*/function drawtime () {var time = new date (); // Dapatkan waktu saat ini. var hour = time.getHours (); // Dapatkan jam var menit = time.getMinutes (); // Dapatkan menit var kedua = time.getSeconds (); // Dapatkan jumlah detik var apm = "am"; // Display Display Pagi: Am. var canvas = document.geteLementById ("myCanvas"); var g2d = canvas.getContext ("2d"); if (jam> 12) {// berhenti menampilkan jam = jam-12; apm = "pm"; } if (menit <10) {// Jika hanya ada 1 digit dalam menit, tambahkan 0 untuk menampilkan menit = "0"+menit; } if (kedua <10) {// Jika jumlah detik hanya 1 digit, tambahkan 0 untuk menampilkan kedua = "0"+kedua; } g2d.clearrect (-xclock, -yclock, 600.600); // Bersihkan layar var s = jam+":"+menit+":"+kedua+":"+apm; g2d.fillstyle = "merah"; g2d.font = d/4+ "px kaiti"; g2d.filltext (s, -d/1.8, d*1.4); g2d.font = d/4 + "px kaiyi"; // buat gradientvar gradien = g2d.createLineArgradient (0,0, canvas.width, 0); gradient.addcolorstop ("0", "magenta"); gradient.addcolorstop ("0,5", "biru"); gradient.addcolorstop ("1.0", "" Red "); gradientg2d.fillstyle = gradient; g2d.filltext ("data besar",-d/2.6, d/2); // Dapatkan pembacaan kedua dari momen pembuatan instance, dan hitung pembacaan busur tangan kedua, relatif terhadap 0 detik, var c = math.pi/30 * detik; // Dapatkan pembacaan menit dari momen penciptaan, dan hitung pembacaan busur dari tangan menit, var b = math.pi/30 * menit;/ * Dapatkan pembacaan jam dari momen penciptaan, dan menghitung pembacaan busur dari tangan jam, relatif terhadap 0 poin, dan menghitung pembacaan busur pembacaan busur tangan jam. * Tingkat radian yang berjalan dengan tangan jam adalah titik per jam (30 derajat per jam), ditambah nilai koreksi dari jumlah menit yang berlalu*/var a = matematika.pi/180* (30* jam + menit/2);/* Sistem koordinat diterjemahkan (xclock, yclock) sehingga axis koordinat menjadi pusat dial*/ DrawNeedles (A, B, C); } // Ujung blok kode dari drawtime metode var i = 0; fungsi pendulum () {// pendulum_bobvar instantangle = baru Array (64,61,56,49,40,29,16,3, -8, -16, -29, -40, -49, -56, -61, -64,- 64, -64, -61, -56, -49, -40, -29, -16, -8,3,16,29,40,49,56,61,64,64); // Array sudut waktu nyata pendulum var c = document.geteLementById ("mypendulum"); var ctx = c.getContext ("2d"); var alpha = instantangle [i ++%instantangle.length]*math.pi/180; ctx.clearrect (-300, -300); Math.pi/180; ctx.clearrect (-300, -300); MATH.PI/180; CTX.ClearRect (-300, -300, -300); // atur tangan kedua ke warna acak ctx.fillstyle = 'brown'; ctx.fillrect (-3,0,6, d*1.4); ctx.shadowblur = 20; ctx.shadowcolor = "hitam"; ctx.fillstyle = "biru"; // ctx.fillrect (-d/3.5, d*1.35, d/1.6, d/4.4); ctx.font = "40px kaiyi"; // Buat gradientvar gradien = ctx.createlineargradient (0,0, c.width, 0); gradient.addcolorstop ("0", "magenta"); gradient.addcolorstop ("0,5", "" "); gradient.addcolorstop (" 0,5 "," "" "); gradient.addcolorstop (" 0,5 "," "" "); gradient.addcolorstop (" 0,5 "," "" "); Isi dengan gradien // ctx.fillstyle = gradien; ctx.fillstyle = "merah"; ctx.filltext ("data besar",-d/3.2, d*1.55); ctx.shadowblur = 0; ctx.shadowcolor = null; ctx.fillstyle = null; ctx.rotate (-alpha); } function preparation () {locateCoordinate () setInterval ('drawTime ()', 500); setInterval ('pendulum ()', 200);} </script> <tyle> #mycanvas {z-index: 3; Posisi: Absolute; Kiri: 0px; Atas: 0px; } #mypendulum {z-index: 2; Posisi: Absolute; Kiri: 0px; Atas: 0px;}#controlpanel {position: absolute; Kiri: 600px; Atas: 0px; Lebar: 100px; Teks-Align: tengah; Font-Family: "Kaiti"; font-size: 20px; font-weight: tebal; color:#6C0;}</style></head><body onLoad="preparation()"><canvas id="myCanvas" > <p>Your browserdoes not support the canvas element!</p> </canvas><canvas id="myPendulum" > <p>Your browserdoes not support the canvas element!</p> </canvas><div ID = "ControlPanel"> <able> <tr> <td> Kontrol </td> <td> tombol </td> </tr> <td> <input value = "memperbesar" type = "tombol" ontClick = "memperbesar ()"> </butt> </td> <td> <input value = "Tipe =" OnClick = "reduping ()"> </button> </td> </tr> <tr> <td> <input value = "left" type = "tombol" onclick = "westwards ()"> </buttpute> </td> <td> </kancing </tapt/TROD "TR/TR/TR/TR/TR/TR/TR/TR/TROT/TR/TRET/TROT/TRET/TRET/TOLKLICK =" TR/TOMPUT </TOMPUT> value = "Upwards" type = "Tombol" OnClick = "Upwards ()"> </button> </td> <td> <input value = "bawah" type = "tombol" onclick = "bawah ()"> </buttml> </td> </tr> </Table> </Div> </body> </hutsml>Gambar reproduksi:
Saya harap artikel ini akan membantu pemrograman web semua orang.