Öğrenme Tuvali

1. vscode'a aşina olmalı
2. HTML, CSS ve javascript hakkında temel bir anlayışa sahip olmalıdır

<!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>

Ardından, sayfadaki diğer tüm öğelerin taşıyıcısı olan "html" öğesine sahibiz. Belgenin dilini belirten “en” olarak ayarlanmış bir “lang” özniteliğine sahiptir.

“html” öğesinin içinde, belge hakkında karakter kodlaması ve belgenin başlığı gibi meta bilgileri içeren “head” öğesi bulunur. Belgenin karakter kodlamasını belirten "UTF-8" olarak ayarlanmış "charset" özniteliğini içeren "meta" öğemiz var. ve "http-equiv" özniteliği "X-UA-Compatible" olarak ayarlanmış "meta" öğesi ve sayfanın Internet Explorer'ın en son sürümünde oluşturulmasını sağlayan "content" özniteliği "IE=edge" olarak ayarlanmış. Ayrıca, sayfanın farklı ekran boyutlarına yanıt vermesini sağlayan "ad" özniteliği "görüntü alanı" olarak ve "içerik" özniteliği "genişlik=cihaz genişliği, başlangıç ​​ölçeği=1.0" olarak ayarlanmış bir "meta" öğemiz var.

Ayrıca, CSS stil sayfasını HTML belgesine bağlayan "rel" özniteliği "stylesheet" olarak ve "href" özniteliği "styles.css" olarak ayarlanmış bir "link" öğemiz var.

Dokümanın başlığı “title” öğesinde ayarlanır.

"Body" öğesinin içinde, JavaScript kodunun animasyonu çizeceği "canvas1" olarak ayarlanmış "id" özniteliğine sahip bir "canvas" öğemiz var. Son olarak, "src" özniteliği "script.js" olarak ayarlanmış bir "script" öğemiz var, bu öğe JavaScript dosyasını HTML belgesine bağlar.

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();

Ardından, sırasıyla tuval öğesinin genişliğine ve yüksekliğine ayarlanan “FRAME_WIDTH” ve “FRAME_HEIGHT” olmak üzere iki sabit tanımlıyoruz. Bağlam değişkenini konsola çıkarmak için "console.log" işlevini de kullanıyoruz.

Ardından yeni bir Image nesnesi oluşturuyoruz ve onu “PLAYERIMAGE” sabitinde saklıyoruz. Daha sonra o resim nesnesinin “src” özelliğini bir resim dosyasının yoluna ayarlıyoruz.

Ayrıca “animate” adlı özel bir işlev oluşturuyoruz, bu işlev requestAnimationFrame yöntemi kullanılarak bir döngüde tekrar tekrar çağrılacak. Animate işlevinin içinde, tüm tuvali temizlemek için önce "clearRect" yöntemini kullanıyoruz. Ardından “fillRect” yöntemini kullanarak (x, 100)'ün x, y koordinatlarında, genişliği ve yüksekliği 100 piksel olan bir dikdörtgen çiziyoruz. Daha sonra (50, 50)'nin x ve y koordinatlarında “PLAYERIMAGE”i tuval üzerine çizmek için “drawImage” metodunu kullanıyoruz.

Son olarak, animasyon döngüsünü başlatmak için "canlandır" işlevini bir kez çağırıyoruz. Ve animasyon efekti oluşturmak için x değişkeni her döngüde güncellenecektir.

Devam etmek için, yavaş yavaş kodu ve projeyi büyüteceğim.