I'm trying to make a clock, using the HTML 5 canvas element and javascript, but it's so damn hard, i rewrote and rewrote the code but it doesn't works.. masih berkutat, kayaknya gaya gue masih terlalu berantakan. Parah.. -__-
But, i've found an interesting thing, here i have the code:
Buka notepad, copy-paste kodenya, rename dari ".txt" jadi ".html" terus buka, dan liat jamnya.
Dibilang jam juga nggak bisa sih, karena aku nggak ngehapus "detik sebelumnya". Dan yang menarik, liat gambar yang terbentuk di tengah "jam" tadi.
.
.
.
.
.
.
.
.
.
Bercanda, nggak usah ngelakuin hal-hal tadi. Cekidot aja disini:
It's so interesting, gue bener-bener pengen tau kenapa bisa keluar karya seni kayak gitu. Cool!!
And notice, semakin banyak putarannya, semakin fade gambarnya.
Thanks for reading! It's nice to shorten the gap between my posts
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Timer</title>
</head>
<body onload="startTime(), spin()">
<script>
var tanggal = new Date;
var angle = tanggal.getSeconds() * 6;
function spin() {
var r = 100;
angle += 6;
if(angle > 360)
angle = 0;
angleRadian = angle*2*Math.PI/360 - 1/2 * Math.PI;
makeLine(r, angleRadian);
setTimeout(spin, 1000);
}
function makeLine(r,angle) {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
context.globalCompositeOperation = "xor";
var y = canvas.height /2;
var x = canvas.width / 2;
var yTarget = y + Math.sin(angle) * r;
var xTarget = x + Math.cos(angle) * r;
context.beginPath();
context.moveTo(x,y);
context.lineTo(xTarget, yTarget);
context.stroke();
}
function startTime() {
var tanggal = new Date;
var jam = tanggal.getHours();
var menit = tanggal.getMinutes();
var detik = tanggal.getSeconds();
var j = checkTime(jam);
var m = checkTime(menit);
var d = checkTime(detik);
document.getElementById("clock").innerHTML = j + ":" + m + ":" + d;
setTimeout(startTime, 500);
}
function checkTime(i) {
if(i < 10){
i = "0" + i;
}
return i;
}
</script>
<div id="clock"></div>
<div id="angle"></div>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
