CARA MEMBUAT JAM ANALOG CANTIK DENGAN GRAFIK SVG

Jam analog

SVG adalah singkatan dari Scalable Vector Graphics. Dan ia mendefinisikan grafik berbasis vektor dalam bentuk format XML, jadi sebenarnya SVG adalah tentang desain web. Atau sesuatu di dunia website terkait desain grafis.

Nah dengan SVG kita dapat mendesain suatu bentuk grafis dengan sumber library yang melimpah, dengannya juga kita dapat membuat game game sederhana. Namun sekali ini saya mencoba memberikan gambaran bagaimana cara membuat jam dinding sederhana menggunakan SVG. Lihat Jam dibawah ini bukanlah dibuat dengan gambar biasa melainkan sebundel kode kode SVG:
Jika kalian ingin menerapkannya ke dalam bentuk konten, maka kalian harus menuliskan kode grafis SVG berikut melalui opsi penulisan "HTML" bukan Compose:

<canvas id="canvas" width="250" height="250"
style="background-color:#f0f0f0">
</canvas>
<script>
var canvas = document.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);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#FF1493');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#0000FF');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#FF1493';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
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 = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>

 Namun jika kalian ingin memasangnya menjadi widget kalian bisa menerapkannya melalui cara:

1. Masuk ke pengaturan blogger
2. Pilih tata-letak
3. Pilih Tambahkan Gagdet
4. Pilih Gagdet HTML/JavaScript

Copy kode diatas dan pada kotak atau blanko kosong HTML/JavaScript, pastekan kode tadi, lalu SAVE template.