Cara Membuat Jam Analog Dengan Canvas Pada HTML5

Hallo teman teman balik lagi dengan Ismet Maulana kali ini saya inginÂ berbagi ilmu tentang Bagaimana Cara Membuat Jam Analog Dengan Canvas Pada HTML5, oke langsung saja yah teman teman .

Teman teman bisa salinkan scriptnya dibawah sini :

<body>

<canvas id="canvas" width="400" height="400"
style="background-color:#333">
</canvas>

<body>

<canvas id="canvas" width="400" height="400"

style="background-color:#333">

</canvas>

javascript :

<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, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  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 = '#333';
  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>

</body>

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, '#333');

grad.addColorStop(0.5, 'white');

grad.addColorStop(1, '#333');

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 = '#333';

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>

</body>

Jika sudah disalin kemudian teman teman save dan jalankan di browser lalu lihat tampilannya .

Cukup mudah bukan? Kita telah menyelesaikan tentang Bagaimana Cara Membuat Jam Analog Dengan Canvas Pada HTML5, cukup sekian tutorial tentang Bagaimana Cara Membuat Jam Analog Dengan Canvas Pada HTML5.

Semoga artikel saya dapat membantu dan bermanfaat, terimakasih ..

#KeepLearn

#IsmetMA

Cara Membuat Jam Analog Dengan Canvas Pada HTML5

Facebook DUMET School

Categories