tutorial pengembangan web terbaru
 

Canvas Clock


Dalam bab ini kita akan membangun sebuah jam analog menggunakan kanvas HTML.


Bagian I - Buat Canvas

Jam perlu sebuah wadah HTML. Buat HTML kanvas 300 x 300 pixel:

Kode HTML:

<!DOCTYPE html>
<html>
<body>

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

<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() {
    ctx.arc(0, 0, radius, 0 , 2*Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();
}
</script>

</body>
</html>
Cobalah sendiri "

kode Dijelaskan

Tambahkan HTML <canvas> elemen halaman Anda:

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

Membuat objek kanvas (var kanvas) dari elemen HTML canvas:

var canvas = document.getElementById("canvas");

Menciptakan objek drawing 2d (var ctx) untuk objek kanvas:

var ctx = canvas.getContext("2d");

Hitunglah jari-jari jam, menggunakan ketinggian kanvas:

var radius = canvas.height / 2;

Menggunakan ketinggian kanvas untuk menghitung radius jam, membuat kerja jam untuk semua ukuran kanvas.

Remap (0,0) posisi (dari objek gambar) ke tengah kanvas:

ctx.translate(radius, radius);

Mengurangi radius jam (90%) untuk menarik jam baik di dalam kanvas:

radius = radius * 0.90;

Buat fungsi untuk menggambar jam:

function drawClock() {
    ctx.arc(0, 0, radius, 0 , 2*Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();
}