Menampilkan Jarum Jam ~ Pemrograman dan Teknologi

Untuk menampilkan sesuatu yang bergerak lurus dalam canvas, kita bisa menggunakan setInterval dan memainkan koordinatnya. Tapi, itu tidak bisa digunakan kalau gerakannya berupa putaran. Lalu, bagaimana cara membuat benda terlihat bergerak memutar? Caranya adalah dengan menggunakan rotate. Rotate digunakan untuk membuat gambar terlihat memutar beberapa derajat jika dibandingkan dengan "gambar yang seharusnya ditampilkan".

<HTML>
<HEAD>
</HEAD>
<BODY>
    <Canvas width="400" height="400" id="kanvas" style="background-color:red;">
        Tidak bisa menampilkan kanvas
    </Canvas> 
    <Script>
        var canvas = document.getElementById("kanvas");
        var ctx = canvas.getContext("2d");
 ctx.strokeStyle="yellow";
 var r = canvas.height / 2;
 var derajat=Math.PI/6;// 180 / 6 =  30
 //ctx.translate(200, 200);
 
 ctx.beginPath();
 ctx.moveTo(0, 0);
 ctx.rotate(derajat);
 ctx.lineTo(200, 0);
 ctx.stroke();
 
 ctx.beginPath();
 ctx.moveTo(0, 0);
 ctx.rotate(derajat);
 ctx.lineTo(200, 0);
 ctx.stroke();
    </Script>
</BODY>
</HTML>

Method lain yang bisa kita gunakan untuk memindahkan posisi gambar dari koordinat yang sebenarnya adalah translate. Translate digunakan untuk memindahkan koordinat secara vertikal atau horisontal. Method translate() akan berguna jika kita ingin menjadikan titik tertentu sebagai pusat putaran dari rotate(). Tanpa translate, rotate() akan menggunakan titik {0, 0} sebagai pusatnya.

Menampilkan Jam Analog

Untuk menampilkan jam digital yang hanya berupa angka, kita cukup menggunakan setInterval() dan method-method yang berhubungan dengan waktu. Tapi, untuk menampilkan jam analog yang memiliki jarum jam, kalian akan membutuhkan perhitungan sudut yang bisa didapatkan dengan method rotate().

Contoh kode HTML yang berisi script untuk menampilkan jarum jam sederhana bisa kalian lihat di bawah ini.

<HTML>
<HEAD>
</HEAD>
<BODY>
    <Canvas width="400" height="400" id="kanvas" style="background-color:red;">
        Tidak bisa menampilkan kanvas
    </Canvas> 
    <Script>
        var canvas = document.getElementById("kanvas");
        var ctx = canvas.getContext("2d");
        var r = canvas.height / 2;
        ctx.translate(r, r);
        r = r * 0.90;
        setInterval(GambarJam, 1000);
        function GambarJam() {
            ctx.beginPath();
            ctx.arc(0, 0, r, 0, 2*Math.PI);
            ctx.fillStyle = 'white';
            ctx.strokeStyle = 'green';
            ctx.fill();
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, 0, r*0.1, 0, 2*Math.PI);
            ctx.fillStyle = '#000';
            ctx.fill();
            TampilkanWaktu(ctx, r);
    }

    function TampilkanWaktu(ctx, r){
        var now = new Date();
        var jam = now.getHours();
        var menit = now.getMinutes();
        var detik = now.getSeconds();
        //jam
        jam=jam%12;
        jam=(jam*Math.PI/6)+(menit*Math.PI/(6*60))+(detik*Math.PI/(360*60));
        GambarJarum(ctx, jam, r*0.5, r*0.07);
        //menit
        menit=(menit*Math.PI/30)+(detik*Math.PI/(30*60));
        GambarJarum(ctx, menit, r*0.8, r*0.07);
        // detik
        detik=(detik*Math.PI/30);
        GambarJarum(ctx, detik, r*0.9, r*0.02);
    }

    function GambarJarum(ctx, pos, panjang, lebar) {
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = lebar;
        ctx.lineCap = "round";
        ctx.moveTo(0,0);
        ctx.rotate(pos);
        ctx.lineTo(0, -panjang);
        ctx.stroke();
        ctx.rotate(-pos);
    }
    </Script>
</BODY>
</HTML>

Pada contoh di atas, kita memindahkan titik koordinat {0, 0} ke tengah kanvas dengan menggunakan method translate(). Ini kita perlukan karena rotate() menggunakan titik {0, 0} sebagai titik tengah putarannya jika tidak menggunakan translate().

Pada contoh kode HTML di atas, kita menggunakan titik tengah kanvas sebagai titik tengah dari jam. Karena kanvas pada kode HTML di atas berbentuk persegi, otomatis panjang dan lebarnya sama. Kita bisa mendapatkan titik tengah kanvas dengan membagi dua tinggi atau lebarnya. Dari panjang tersebut kita bisa mendapatkan jari-jarinya.

Selain menggunakan rotate, kita bisa juga menggunakan sin dan cos untuk membuat tampilan memutar. Saya memilih rotate dengan tujuan untuk mencontohkan cara penggunaan method tersebut. Untuk penggunaan sin dan cos, saya akan mencontohkannya lewat angka yang akan kita tampilkan di dalam jamnya. Coba ubah script dari kode HTML di atas jadi seperti di bawah ini, dan lihat hasilnya!

var canvas = document.getElementById("kanvas");
var ctx = canvas.getContext("2d");
var r = canvas.height / 2;
ctx.translate(r, r);
r = r * 0.90;
setInterval(GambarJam, 1000);

function GambarJam() {
 ctx.beginPath();
 ctx.arc(0, 0, r, 0, 2*Math.PI);
 ctx.fillStyle = 'white';
 ctx.strokeStyle = 'green';
 ctx.fill();
 ctx.stroke();
 ctx.beginPath();
 ctx.arc(0, 0, r*0.1, 0, 2*Math.PI);
 ctx.fillStyle = '#000';
 ctx.fill();
 TampilkanWaktu(ctx, r);
}

function TampilkanWaktu(ctx, r){
 var now = new Date();
 var jam = now.getHours();
 var menit = now.getMinutes();
 var detik = now.getSeconds();
 //angka
 var x, y;
 var deg2rad=Math.PI/180;

 ctx.fillStyle = 'green';
 ctx.textAlign="center";
 ctx.font="16px Arial";
 for(var i=0;i<360;i+=30){
     x=Math.cos(i*deg2rad)*150;
     y=Math.sin(i*deg2rad)*150;
     ctx.fillText(""+((((i/30)+2)%12)+1), x, y+4);
 }
 //jam
 jam=jam%12;
 jam=(jam*Math.PI/6)+(menit*Math.PI/(6*60))+(detik*Math.PI/(360*60));
 GambarJarum(ctx, jam, r*0.5, r*0.07);
 //menit
 menit=(menit*Math.PI/30)+(detik*Math.PI/(30*60));
 GambarJarum(ctx, menit, r*0.8, r*0.07);
 // detik
 detik=(detik*Math.PI/30);
 GambarJarum(ctx, detik, r*0.9, r*0.02);
}

function GambarJarum(ctx, pos, panjang, lebar) {
 ctx.beginPath();
 ctx.strokeStyle = 'black';
 ctx.lineWidth = lebar;
 ctx.lineCap = "round";
 ctx.moveTo(0,0);
 ctx.rotate(pos);
 ctx.lineTo(0, -panjang);
 ctx.stroke();
 ctx.rotate(-pos);
}