Jam Canvas
- Hal Sebelumnya Gambar Canvas
- Hal Berikutnya Layar Jam
Pada bab selanjutnya, kita akan membangun jam simulasi menggunakan kanvas HTML.
Bagian Pertama - Buat Kanvas
Jam memerlukan kontainer HTML. Buat kanvas HTML:
Kode HTML:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let 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>
Penjelasan Kode
Tambahkan elemen <canvas> HTML ke halaman Anda:
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
Buat objek kanvas (const canvas):
const canvas = document.getElementById("canvas");
Buat objek pereka 2d untuk objek kanvas (const ctx):
const ctx = canvas.getContext("2d");
Gunakan tinggi kanvas untuk menghitung jari jam jam:
let radius = canvas.height / 2;
Pemberitahuan
Gunakan tinggi kanvas untuk menghitung jari jam jam, sehingga jam cocok untuk semua ukuran kanvas.
Pindahkan posisi (0,0) objek pereka ke pusat kanvas:
ctx.translate(radius, radius);
Kurangi jari jam (sampai 90%), dan gambar jam 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();
{}
Lihat Juga:
- Hal Sebelumnya Gambar Canvas
- Hal Berikutnya Layar Jam
