Animasi Orang Berjalan
Implementasi Animasi
Animasi ini menggunakan HTML5 Canvas dan JavaScript untuk menciptakan efek orang berjalan:
- Orang digambar menggunakan bentuk dasar (lingkaran untuk kepala, garis untuk tubuh)
- Pergerakan kaki dan tangan diatur dengan parameter sudut yang berubah secara periodik
- Posisi horizontal orang bergerak dari kiri ke kanan secara berulang
- Teknik double buffering digunakan untuk animasi yang lebih halus
function drawPerson(ctx, x, y, step) {
// Menggambar kepala
ctx.beginPath();
ctx.arc(x + 25, y + 15, 10, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
// Menggambar tubuh
ctx.beginPath();
ctx.moveTo(x + 25, y + 25);
ctx.lineTo(x + 25, y + 60);
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 2;
ctx.stroke();
}
// Menggambar kepala
ctx.beginPath();
ctx.arc(x + 25, y + 15, 10, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
// Menggambar tubuh
ctx.beginPath();
ctx.moveTo(x + 25, y + 25);
ctx.lineTo(x + 25, y + 60);
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 2;
ctx.stroke();
}
Poligon dan Teks
Output Aplikasi
Poligon dibuat menggunakan koordinat titik-titik yang saling terhubung:
- Titik-titik ditentukan dalam array 2D
- Poligon diisi dengan warna kuning (default)
- Teks "Komputer Grafik" ditambahkan di tengah poligon
- Animasi teks dapat diaktifkan untuk efek bergerak
function drawPolygon() {
const points = [
[10, 10], [200, 10], [200, 110],
[30, 110], [10, 125], [20, 110], [10, 110]
];
ctx.beginPath();
ctx.moveTo(points[0][0], points[0][1]);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i][0], points[i][1]);
}
ctx.closePath();
ctx.fillStyle = polygonColor;
ctx.fill();
}
const points = [
[10, 10], [200, 10], [200, 110],
[30, 110], [10, 125], [20, 110], [10, 110]
];
ctx.beginPath();
ctx.moveTo(points[0][0], points[0][1]);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i][0], points[i][1]);
}
ctx.closePath();
ctx.fillStyle = polygonColor;
ctx.fill();
}