Sangat terburu-buru dengan hati yang senang membuat semua nya menjadi indah, maka dari itu disini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Canvas Jam Tangan Dengan HTML.
Apa itu canvas jam tangan? yang dimaksud adalah kita membuat jam tangan menggunakan canvas di HTML. Jam nya mengikuti jam dunia. Dan untuk melihat jarum detik nya berubah itu kita harus me-refresh browser tersebut. Langsung saja, berikut Cara Membuat Canvas Jam Tangan Dengan HTML.
Pertama-tama siapkan file index.html nya.
Kemudian buat di tag <body> canvas nya seperti tag di bawah,
<canvas id="canvas" width="400" height="400" style="background-color:#333"> </canvas>
Lalu terakhir buat fungsi jam nya,
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();
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>Maka outputnya akan seperti gambar di bawah,
Bagaimana teman-teman untuk Cara Membuat Canvas Jam Tangan Dengan HTML nya? cukup mudah bukan?
Sekian untuk tutorial kali ini, semoga bermanfaat.
Terima kasih
The post Cara Membuat Canvas Jam Tangan Dengan HTML appeared first on Kursus Website Terbaik.