Komentar: Jam yang diterapkan oleh html5canvas, silakan merujuknya
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> jam html </iteme>
</head>
<body>
<an kanvas>
Browser Anda tidak mendukung tag Canvas, dan tangan jam tidak dapat ditampilkan!
</ Canvas>
<type skrip = "Teks/JavaScript">
// Warna latar belakang kanvas
var clockbackgroundColor = "#abcdef";
// Warna tangan jam
var hourpointcolor = "#000";
// ketebalan tangan jam
var hourpointwidth = 7;
// Panjang tangan jam
var hourpointlength = 100;
// warna tangan menit
var minpointColor = "#000";
// ketebalan tangan menit
var minpointwidth = 5;
// panjang tangan menit
var minpointlength = 150;
// Warna tangan kedua
var secpointColor = "#f00";
// ketebalan kedua
var secpointwidth = 3;
// Panjang tangan kedua
var secpointlength = 170;
// Putar warna
var clockpanelcolor = "#abcdef";
// Putar warna skala
var scalecolor = "#000";
// Tekan lebar skala besar 3 6 9 12
var scaleBigWidth = 9;
// panjang skala besar dial
var scaleBigLength = 15;
// Lebar skala kecil dial
var scalesmallwidth = 5;
// panjang skala kecil dial
var scalesmalllength = 10;
// warna tengah
var centercolor = 'red';
// CLOCK CANVAS
var clock = document.geteLementById ('clock');
clock.style.background = ClockbackgroundColor;
// Lingkungan menggambar kanvas tangan jam (lukisan)
var panel = clock.getContext ('2d');
// Gambarlah garis
/**
*Menggambar segmen garis
*
*
*/
function drawline (p, lebar, warna, startx, starty, endx, endy, ran, cx, cy) {
// Simpan artboard yang masuk, yang setara dengan membuka lapisan baru setiap kali Anda menggambar
P.Save ();
// Atur lebar kuas
p.linewidth = lebar;
// Atur warna kuas
p.strokestyle = warna;
// Baru membuka jalur gambar untuk menghindari gangguan dengan konten sebelumnya di artboard
p.beginpath ();
p.translate (cx, cy);
//Rotasi
p.rotate (ran);
// Pindahkan sikat ke posisi awal
p.moveto (startx, starty);
// Pindahkan sikat ke posisi akhir
p.lineto (endx, endy);
// Operasi menggambar garis
p.stroke ();
// Tutup jalur gambar untuk menghindari gangguan dengan konten yang ditarik di Artboard nanti
p.closepath ();
// Lapangan lapisan pada objek Artboard yang masuk
p.Restore ();
}
/**
*Gambar garis horizontal
*/
fungsi drawhorizontalline (p, lebar, panjang, warna, startx, starty, ran, cx, cy) {
drawline (p, lebar, warna, startx, starty, startx+length, starty, ran, cx, cy);
}
/**
*Menggambar lingkaran
*/
function drawcircle (p, lebar, warna, centrex, centrey, r) {
P.Save ();
// Atur lebar kuas
p.linewidth = lebar;
// Atur warna kuas
p.strokestyle = warna;
// Baru membuka jalur gambar untuk menghindari gangguan dengan konten sebelumnya di artboard
p.beginpath ();
// Gambar lingkaran
P.arc (Centrex, Centrey, R, 0,360, salah);
// Operasi menggambar garis
p.stroke ();
// Tutup jalur gambar untuk menghindari gangguan dengan konten yang ditarik di Artboard nanti
p.closepath ();
// Lapangan lapisan pada objek Artboard yang masuk
p.Restore ();
}
function drawpoint (p, lebar, warna, centrex, centrey, r) {
P.Save ();
// Atur lebar kuas
p.linewidth = lebar;
// Atur warna kuas
p.fillstyle = warna;
// Baru membuka jalur gambar untuk menghindari gangguan dengan konten sebelumnya di artboard
p.beginpath ();
// Gambar lingkaran
P.arc (Centrex, Centrey, R, 0,360, salah);
// Operasi menggambar garis
p.fill ();
// Tutup jalur gambar untuk menghindari gangguan dengan konten yang ditarik di Artboard nanti
p.closepath ();
// Lapangan lapisan pada objek Artboard yang masuk
p.Restore ();
}
function drawscales (p) {
// Gambarlah skala kecil
untuk (var i = 0; i <60; i ++) {
drawhorizontalline (p, scalesmallwidth, scalesmalllength, scalecolor, 195-scalesmalllength, 0, i*6*math.pi/180.250.250);
}
// Gambarlah skala besar
untuk (var i = 0; i <12; i ++) {
drawhorizontalline (p, i%3 == 0? ScalebigWidth*1.2: skalaBigwidth, i%3 == 0? SkalaBigLength*1.2: ScalebigLength, Scalecolor, 195-skalebiglength, 0, i*30*Math.pi/180.250.250);
// Anda dapat menambahkan skala digital
}
}
fungsi dristaPoint (p, jam) {
drawhorizontalline (p, hourpointwidth, hourpointlength, hourpointcolor, -10,0, (hour-3)*30*math.pi/180.250.250);
}
function drawMinpoint (p, min) {
drawhorizontalline (p, minpointwidth, minpointlength, minpointcolor, -15,0, (min-15)*6*math.pi/180.250.250);
}
fungsi drawsecpoint (p, dt) {
drawhorizontalline (p, secpointwidth, secpointlength, secpointcolor, -15,0, (sec-15)*6*math.pi/180.250.250);
}
function drawclock () {
Panel.Clearrect (0,0.500.500);
panel.filltext ("", 10,20);
panel.filltext ("<a href =" http://www.vevb.com ", 10,40"> ", 10,40 </a>);
var date = new date ();
var sec = date.getSeconds ();
var min = date.getMinutes ();
var hour = date.getHours () + min/60;
Drawcircle (panel, 7, 'biru', 250.250.200);
drawscales (panel);
drophourpoint (panel, jam);
DrawMinPoint (panel, min);
DrawSecpoint (Panel, Sec);
drawpoint (panel, 1, centercolor, 250.250,7);
// drowhorizontalline (panel, 10,10, 'merah',-5,0,0.250.250);
}
//drowhorizontalline(panel,7,30,'#f00',0,0,math.pi ,250.250);
drawclock ();
setInterval (Drowclock, 1000);
fungsi save () {
var image = clock.todataurl ("Image/png"). Ganti ("Image/Png", "Image/Octet-Stream");
location.href = gambar;
}
</script>
</body>
</html>