Buat Kanvas
Jam membutuhkan wadah HTML. Buat kanvas HTML:
Tag HTML5 <canvas> digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript).
Namun, elemen <canvas> tidak memiliki kemampuan menggambarnya sendiri (ini hanya wadah untuk gambar) - Anda harus menggunakan skrip untuk benar-benar menggambar grafik.
Metode getContext () mengembalikan objek yang menyediakan metode dan properti untuk menggambar di kanvas.
Referensi ini akan mencakup properti dan metode objek getContext ("2d"), yang dapat digunakan untuk menggambar teks, garis, kotak, lingkaran, dan lainnya - di kanvas.
Jam membutuhkan wadah HTML. Buat kanvas HTML:
Namun, elemen <canvas> tidak memiliki kemampuan menggambarnya sendiri (ini hanya wadah untuk gambar) - Anda harus menggunakan skrip untuk benar-benar menggambar grafik.
Metode getContext () mengembalikan objek yang menyediakan metode dan properti untuk menggambar di kanvas.
Referensi ini akan mencakup properti dan metode objek getContext ("2d"), yang dapat digunakan untuk menggambar teks, garis, kotak, lingkaran, dan lainnya - di kanvas.
<! DOCTYPE html>
<html>
<body>
<canvas id = "canvas" width = "400" height = "400"
style = "warna latar belakang: # 333">
</canvas>
<script>
var canvas = dokumen .getElementById ("canvas");
var ctx = canvas.getContext ("2d");
var radius = canvas.height / 2;
ctx.translate (radius, radius);
radius = radius * 0,90
setInterval (drawClock, 1000);
function drawClock () {
drawFace (ctx, radius);
drawNumber (ctx, radius);
drawTime (ctx, radius);
} function drawFace (ctx, radius) { var grad; ctx.beginPath (); ctx.arc (0, 0, radius, 0, 2 * Math.PI); ctx.fillStyle = 'putih';
ctx.fill ();
grad = ctx.createRadialGradient (0,0, radius * 0,95, 0,0, radius * 1,05);
grad.addColorStop (0, '# 333');
grad.addColorStop (0,5, 'putih');
grad.addColorStop (1, '# 333');
ctx.strokeStyle = lulusan;
ctx.lineWidth = radius * 0,1;
ctx.stroke ();
ctx.beginPath ();
ctx.arc (0, 0, radius * 0,1, 0, 2 * Math.PI);
ctx.fillStyle = '# 333';
ctx.fill ();
}
function drawNumbers (ctx, radius) {
var ang;
var num;
ctx.font = radius * 0,15 + "px arial";
ctx.textBaseline = "tengah";
ctx.textAlign = "center";
untuk (num = 1; num <13;
ctx.rotate (ang);
ctx.translate (0, -radius * 0.85);
ctx.rotate (-ang);
ctx.fillText (num.toString (), 0, 0);
ctx.rotate (ang);
ctx.translate (0, radius * 0.85);
ctx.rotate (-ang);
}
}
function drawTime (ctx, radius) {
var now = Date baru ();
var hour = now.getHours ();
var minute = now.getMinutes ();
var second = now.getSeconds ();
// jam
jam = jam% 12;
jam = (jam * Math.PI / 6) +
(menit * Math.PI / (6 * 60)) +
(kedua * Math.PI / (360 * 60));
drawHand (ctx, jam, radius * 0,5, radius * 0,07);
//menit
menit = (menit * Math.PI / 30) + (kedua * Math.PI / (30 * 60));
drawHand (ctx, menit, radius * 0.8, radius * 0.07);
// detik
kedua = (kedua * Math.PI / 30);
drawHand (ctx, second, radius * 0.9, radius * 0.02);
}
function drawHand (ctx, pos, panjang, lebar) {
ctx.beginPath ();
ctx.lineWidth = lebar;
ctx.lineCap = "round";
ctx.moveTo (0,0);
ctx.rotate (pos);
ctx.lineTo (0, -length);
ctx.stroke ();
ctx.rotate (-pos);
}
</script>
</body>
</html>
Tidak ada komentar: