Belajar Kanvas

Jan 19 2023

Selanjutnya, kita memiliki elemen “html”, yang merupakan wadah untuk semua elemen lain di halaman. Ini memiliki atribut "lang" yang disetel ke "en" yang menentukan bahasa dokumen.

Harus akrab dengan vscode
harus memiliki pemahaman dasar tentang HTML, CSS, dan javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas1"></canvas>
    <script src="script.js"></script>
</body>
</html>

Selanjutnya, kita memiliki elemen “html”, yang merupakan wadah untuk semua elemen lain di halaman. Ini memiliki atribut "lang" yang disetel ke "en" yang menentukan bahasa dokumen.

Di dalam elemen "html", kami memiliki elemen "head", yang berisi informasi meta tentang dokumen, seperti pengkodean karakter dan judul dokumen. Kami memiliki elemen "meta" yang berisi atribut "charset" yang disetel ke "UTF-8" yang menentukan pengkodean karakter dokumen. dan elemen "meta" dengan atribut "http-equiv" disetel ke "Kompatibel dengan X-UA" dan atribut "konten" disetel ke "IE=edge" yang memastikan bahwa halaman dirender dalam versi terbaru Internet Explorer. Kami juga memiliki elemen "meta" dengan atribut "nama" disetel ke "viewport" dan atribut "konten" disetel ke "width=device-width, initial-scale=1.0" yang membuat halaman responsif terhadap ukuran layar yang berbeda.

Kami juga memiliki elemen "tautan" dengan atribut "rel" yang disetel ke "stylesheet" dan atribut "href" yang disetel ke "styles.css" yang menautkan lembar gaya CSS ke dokumen HTML.

Judul dokumen diatur dalam elemen "judul".

Di dalam elemen "body", kami memiliki elemen "canvas" dengan atribut "id" yang disetel ke "canvas1", di mana kode JavaScript akan menggambar animasi. Terakhir, kami memiliki elemen "skrip" dengan atribut "src" yang disetel ke "script.js", elemen ini menautkan file JavaScript ke dokumen HTML.

const canvas = document.getElementById('canvas1');
const context = canvas.getContext('2d');

const FRAME_WiDTH = canvas.width = 600;
const FRAME_HEIGHT = canvas.height = 600;

console.log(context);

const PLAYERIMAGE = new Image();
PLAYERIMAGE.src = 'img/shadow_dog.png';

// custom function
let x = 0;
function animate(){
    context.clearRect(0, 0, FRAME_WiDTH, FRAME_HEIGHT);
    context.fillRect(x,100,100,100);
    context.drawImage(PLAYERIMAGE, 50, 50,)

    requestAnimationFrame(animate);
};

animate();

Selanjutnya, kita mendefinisikan dua konstanta, "FRAME_WIDTH" dan "FRAME_HEIGHT", yang masing-masing disetel ke lebar dan tinggi elemen kanvas. Kami juga menggunakan fungsi "console.log" untuk menampilkan variabel konteks ke konsol.

Setelah itu, kami membuat objek Gambar baru dan menyimpannya di konstanta "PLAYERIMAGE". Kami kemudian menyetel properti "src" dari objek gambar itu ke jalur file gambar.

Kami juga membuat fungsi khusus yang disebut "animate", fungsi ini akan dipanggil berulang kali dalam satu lingkaran menggunakan metode requestAnimationFrame. Di dalam fungsi animate, pertama-tama kita menggunakan metode "clearRect" untuk menghapus seluruh kanvas. Kemudian kita menggunakan metode "fillRect" untuk menggambar persegi panjang pada koordinat x, y dari (x, 100), dengan lebar dan tinggi 100 piksel. Setelah itu, kita menggunakan metode "drawImage" untuk menggambar "PLAYERIMAGE" pada kanvas pada koordinat x dan y dari (50, 50).

Terakhir, kita memanggil fungsi "animate" satu kali untuk memulai loop animasi. Dan variabel x akan diperbarui pada setiap loop untuk membuat efek animasi.

Belajar Kanvas

Untuk melanjutkan, saya secara bertahap akan mengembangkan kode dan proyeknya.