HTML + JavaScript

基礎的な構文のみ if / for 変数宣言・配列操作・関数作成など

テキストエディタを開いて、下記のコードをコピペして、拡張子htmlで保存

<!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">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas"></canvas>
	<script>
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');

		ctx.fillStyle = 'green';
		ctx.fillRect(10, 10, 150, 100);
	</script>
</body>
</html>

canvasを使ってみよう

https://developer.mozilla.org/ja/docs/Web/API/Canvas_API

HTMLにCanvas要素を追加
JavaScriptを追加

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

	ctx.fillStyle = 'green';
	// x, y, width, height
	ctx.fillRect(10, 10, 150, 100);

試してみよう

色を変えてみる

ctx.fillStyle = 'tomato';
サイズ、位置を変えてみる

ctx.fillRect(50, 50, 200, 200);

プログラムで好きな色、位置を指定して色をつけるスキルを手に入れた！

たくさん書いてみよう！

//for(初期設定; 繰り返し条件; 後処理) {
// 繰り返し実行したい処理
//}

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

ctx.fillStyle = 'green';

for(let i=0;i<10;i++){
  ctx.fillRect(10 * i, 10 * i, 10, 10);
}