ラーニングキャンバス

1. vscode に精通している必要があります
2. HTML、CSS、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>

次に、「html」要素があります。これは、ページ上の他のすべての要素のコンテナです。これには、ドキュメントの言語を指定する「en」に設定された「lang」属性があります。

「html」要素内には「head」要素があり、文字エンコーディングやドキュメントのタイトルなど、ドキュメントに関するメタ情報が含まれています。ドキュメントの文字エンコーディングを指定する「UTF-8」に設定された「charset」属性を含む「meta」要素があります。「http-equiv」属性が「X-UA-互換」に設定され、「content」属性が「IE=edge」に設定された「meta」要素。これにより、ページが最新バージョンの Internet Explorer でレンダリングされることが保証されます。また、「name」属性が「viewport」に設定され、「content」属性が「width=device-width、initial-scale=1.0」に設定された「meta」要素もあります。これにより、ページがさまざまな画面サイズに対応できるようになります。

また、「rel」属性が「stylesheet」に設定され、「href」属性が「styles.css」に設定された「link」要素もあり、CSS スタイルシートを HTML ドキュメントにリンクします。

title要素には文書のタイトルが設定されます。

「body」要素内には、「id」属性が「canvas1」に設定された「canvas」要素があり、ここに JavaScript コードがアニメーションを描画します。最後に、「src」属性が「script.js」に設定された「script」要素があり、この要素は JavaScript ファイルを 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();

次に、2 つの定数「FRAME_WIDTH」と「FRAME_HEIGHT」を定義し、それぞれキャンバス要素の幅と高さに設定します。また、「console.log」関数を使用してコンテキスト変数をコンソールに出力しています。

その後、新しい Image オブジェクトを作成し、それを定数「PLAYERIMAGE」に保存します。次に、その画像オブジェクトの「src」プロパティを画像ファイルのパスに設定します。

また、「animate」というカスタム関数も作成しています。この関数は、requestAnimationFrame メソッドを使用してループ内で繰り返し呼び出されます。animate 関数内では、まず「clearRect」メソッドを使用してキャンバス全体をクリアします。次に、「fillRect」メソッドを使用して、x、y 座標が (x, 100)、幅と高さが 100 ピクセルの四角形を描画します。その後、「drawImage」メソッドを使用して、キャンバス上の x 座標と y 座標 (50, 50) に「PLAYERIMAGE」を描画します。

最後に、「animate」関数を 1 回呼び出して、アニメーション ループを開始します。そして、x 変数はアニメーション効果を作成するためにループごとに更新されます。

今後もコードとプロジェクトを徐々に成長させていきます。