課題7　Canvas

課題7-1

  1. Terapadを起動する。
  2. タブの幅を4文字分にし、タブと空白文字を表示する設定に変更する (方法を忘れた場合はWebページ制作初回の資料を参照)。
    3. (自宅で作業したことがある場合は設定が残っているはずなのでこの工程は飛ばしてよい)
  3. デスクトップに「課題7」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. 文字コード「UTF-8N」で、「1」フォルダーの中に「index.html」「main.css」という2つのファイルを作る。
  5. それぞれに以下のコードを記入して上書き保存する。

    6. index.html (コピペ可)
    <!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="main.css">
	<title>Canvasの練習</title>
</head>
<body onload="draw();">
<h2>Canvasの練習</h2>
<div id="main">
	<script>
		function draw(){
			var canvas = document.getElementById('canvas1');
			if (canvas.getContext){
				var ctx = canvas.getContext('2d');
				ctx.fillStyle = "gray";
				ctx.fillRect(0, 0, canvas.width, canvas.height);
			}
		}
	</script>
	<canvas id="canvas1" width="400" height="300" border=1></canvas>
</div>
</body>
</html>

    main.css (前回と全く同じ)


  6. index.htmlをChromeで開くと、以下のようなものが表示される。
    7. canvasタグで囲んだ部分が描画エリア (Canvas) を作る命令。
    その上のscriptタグで囲んだ部分に「キャンバス全体を灰色で塗りつぶす」関数「draw」を書いてある。
    bodyタグのonloadでこの関数を指定することで、ブラウザ再読み込み時にその関数が呼ばれる。

  7. 赤枠のコードを追加し、ブラウザを更新する。

    8. fillStyleは塗りつぶしの色を指定する命令。その行より下での描画の色がこの色になる。
    色の英語名のほかに、"#aa00bb"のようにRGBの値で色を指定することもできる。
    fillRectでは中身を塗りつぶした長方形を描ける。4つの引数は(左上の角のx座標, 左上の角のy座標, 長方形の横幅, 長方形の高さ)にあたる。
    最初の「背景を灰色で塗りつぶす」もこれを使っていた。canvas.widthとcanvas.heightはキャンパスの幅と高さ。

  8. さっき追加したコードの下に以下のコードを追加し、ブラウザを更新する。
    9. 				// 線
				ctx.strokeStyle = "red";
				ctx.lineWidth = 5;
				ctx.beginPath();
				ctx.moveTo(150, 100);
				ctx.lineTo(300, 200);
				ctx.stroke();
    skrokeStyleは線・枠線の色を指定する命令。
    lineWidthは線・枠線の太さを指定する命令。
    beginPath, strokeの間にmoveTo, lineToを描くことで線が描ける。lineToを連続させれば折れ線になる。


  9. さっき追加したコードの下に以下のコードを追加し、ブラウザを更新する。
    10. 				// 円
				ctx.fillStyle = "green";
				ctx.strokeStyle = "blue";
				ctx.beginPath();
				ctx.arc(150, 200, 50, 0, Math.PI*2, false);
				ctx.fill();
				ctx.stroke();
    arcは円か円弧を描く命令。引数は(中心のx座標, 中心のy座標, 半径, 開始角度, 終了角度, 回転の向き)。
    開始と終了の角度を0と2πにすると円になるが、半端な角度にすれば扇形が描ける。最後の引数をfalseにした場合は、0が3時、π/2が6時の方向なので、こうすれば1/4円になる。

課題7-2

  1. 課題7-1の結果表示用のChromeのタブ、すべてのTeraPadを閉じる。
  2. 「課題7」フォルダの中に「2」フォルダを作る。
  3. 「2」フォルダの中にindex.htmlファイルを作る (cssファイルや別のhtmlファイルを入れてもよい)。
  4. それらのファイルを編集し、オリジナルのページを作る。
課題の条件
注意 (この課題限定ではなく、Webページ全般について)

提出

inserted by FC2 system