Membuat nomor jam menggunakan javascript

Bagaimana cara untuk membuat nomor jam dengan menggunakan javascript. Nah, kali ini Saya akan memberikan kode yang bisa Anda gunakan untuk membuatnya. Disini Saya membuat jam dengan tampilan bulat, dengan penomoran hingga angka 12. Silahkan Anda kreasikan sendiri bentuk, warna tampilannya dengan mengubah kode warna maupun nilai ukurannya.

Kode untuk membuat kanvasnya seperti ini:

<canvas id="kanvas" width="250" height="250"
style="background-color:#eee">
</canvas>

Sedangkan kode javascriptnya seperti ini:

<script>
var kanvas = document.getElementById("kanvas");
var konteks = kanvas.getContext("2d");
var radius = kanvas.height / 2;
konteks.translate(radius, radius);
radius = radius * 0.75
buatJam();

function buatJam() {
  buatTampilan(konteks, radius);
  buatNomor(konteks, radius);
}

function buatTampilan(konteks, radius) {
  var z;
  konteks.beginPath();
  konteks.arc(0, 0, radius, 0, 2*Math.PI);
  konteks.fillStyle = 'grey';
  konteks.fill();
  z = konteks.createRadialGradient(0,0,radius*0.90, 0,0,radius*1.05);
  z.addColorStop(0, '#eee');
  z.addColorStop(0.5, 'grey');
  z.addColorStop(1, '#eee');
  konteks.strokeStyle = z;
  konteks.lineWidth = radius*0.13;
  konteks.stroke();
  konteks.beginPath();
  konteks.arc(0, 0, radius*0.05, 0, 2*Math.PI);
  konteks.fillStyle = '#eee';
  konteks.fill();
}

function buatNomor(konteks, radius) {
  var x;
  var y;
  konteks.font = radius*0.11 + "px arial";
  konteks.textBaseline="middle";
  konteks.textAlign="center";
  for(y = 1; y < 13; y++){
    x = y * Math.PI / 6;
    konteks.rotate(x);
    konteks.translate(0, -radius*0.75);
    konteks.rotate(-x);
    konteks.fillText(y.toString(), 0, 0);
    konteks.rotate(x);
    konteks.translate(0, radius*0.75);
    konteks.rotate(-x);
  }
}
</script>

Hasil penggabungan kedua kode tersebut dengan menggunakan HTML 5 seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Membuat nomor jam menggunakan javascript created by w3codez</title>
</head>
<body>

<canvas id="kanvas" width="250" height="250"
style="background-color:#eee">
</canvas>

<script>
var kanvas = document.getElementById("kanvas");
var konteks = kanvas.getContext("2d");
var radius = kanvas.height / 2;
konteks.translate(radius, radius);
radius = radius * 0.75
buatJam();

function buatJam() {
  buatTampilan(konteks, radius);
  buatNomor(konteks, radius);
}

function buatTampilan(konteks, radius) {
  var z;
  konteks.beginPath();
  konteks.arc(0, 0, radius, 0, 2*Math.PI);
  konteks.fillStyle = 'grey';
  konteks.fill();
  z = konteks.createRadialGradient(0,0,radius*0.90, 0,0,radius*1.05);
  z.addColorStop(0, '#eee');
  z.addColorStop(0.5, 'grey');
  z.addColorStop(1, '#eee');
  konteks.strokeStyle = z;
  konteks.lineWidth = radius*0.13;
  konteks.stroke();
  konteks.beginPath();
  konteks.arc(0, 0, radius*0.05, 0, 2*Math.PI);
  konteks.fillStyle = '#eee';
  konteks.fill();
}

function buatNomor(konteks, radius) {
  var x;
  var y;
  konteks.font = radius*0.11 + "px arial";
  konteks.textBaseline="middle";
  konteks.textAlign="center";
  for(y = 1; y < 13; y++){
    x = y * Math.PI / 6;
    konteks.rotate(x);
    konteks.translate(0, -radius*0.75);
    konteks.rotate(-x);
    konteks.fillText(y.toString(), 0, 0);
    konteks.rotate(x);
    konteks.translate(0, radius*0.75);
    konteks.rotate(-x);
  }
}
</script>

</body>
</html>

Nanti hasilnya akan seperti ini:

Sekian, semoga bermanfaat. Mohon maaf bila ada kesalahan.

Pages

w3codez

adchoices