課題7　Canvas

課題6に引き続き、今回もJavaScriptを使ったページを作る。今回は主に図形の描画に関わる命令を扱う。 JavaScriptのファイル「program.js」側で起きたエラーの確認の方法は前回の資料の JavaScriptのエラーのチェック (11/16追記) を参照。

デスクトップに「課題7」フォルダーを作り、その中に「1」「2」フォルダーを作る。
Visual Studio Codeを起動する。
「File」→「Preferences」→「Settings」で設定メニューを出し、「render whitespace」で検索して設定を「all」に変える。
Visual Studio Codeで「File」→「Open Folder」で「課題7」フォルダーを開く。
「課題7」の中の「1」フォルダーの中に「index.html」「main.css」「program.jp」という3つのファイルを作る。

index.html に以下のコードをコピー＆ペーストして上書き保存する。
(15行目のcanvasタグが描画エリアを作る記述。ここで幅を800ピクセル、高さを600ピクセルにしている)

<!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" type="text/css" href="main.css">
    <script type="text/javascript" src="program.js"></script>
    <title>課題7-1. Canvas</title>
</head>

<body onload="clearCanvas();">
    <span class="big futoji">JavaScriptによる描画</span>
    <br>
    <canvas id="maincanvas" width="800" height="600"></canvas>
    <br>
    <input type="button" value="線" onClick="drawLines(1);">
    <input type="button" value="クリア" onClick="clearCanvas();">
</body>

</html>

main.css に以下のコードをコピー＆ペーストして上書き保存する。
(いつものimgに対する設定と同様に、canvasの最大幅をブラウザ幅にすることでブラウザを小さくするとキャンバスがそれに合わせて縮小表示されるようになる)
```
canvas {
    max-width: 100%;
}

.big {
    font-size: 2.0em;
}

.futoji {
    font-weight: bold;
}
```
program.js に以下のコードをコピー＆ペーストして上書き保存する。
(clearCanvasはキャンバスを初期化して灰色で塗りつぶす関数)
(getRandomColorはランダムな色を返す関数。前回乱数を表示させた時と同様、0～1の乱数を256倍して整数化することで0～255の値を得ている)
(drawLinesはn本の折れ線を描く関数)
(下から4行目の「ctx.linteTo(x, y);」は、その前にいた場所から (x, y) をつなぐ線を描く命令。最初だけは (x, y) の移動になる。これを n+1 回繰り返すことで n本つながった折れ線になる)
```
var canvas;
var ctx;

function clearCanvas() {
    canvas = document.getElementById("maincanvas");
    if (canvas.getContext) {
        ctx = canvas.getContext('2d');
        ctx.fillStyle = "gray";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
}

function getRandomColor() {
    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}

function drawLines(n) {
    if (!ctx){
        return;
    }
    ctx.strokeStyle = getRandomColor();
    ctx.lineWidth = 5;
    ctx.beginPath();
    for (var i = 0; i <= n; i++) {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        ctx.lineTo(x, y);
    }
    ctx.stroke();
}
```
index.htmlで <body onload="clearCanvas();"> とすることで、ブラウザ更新時に自動的にこの関数が呼ばれる。
「線」ボタンで drawLines(1) を呼ぶことで「1本の折れ線」、つまり普通の直線が描かれる。
「クリア」ボタンで clearCanvas() を呼ぶことでキャンバスに描いた線がクリアされる。

index.html を FireFoxで開き、「線」でランダムな色の線分が描かれ、「クリア」でそれらが消えればOK。
index.htmlに以下のものを追加してブラウザを更新する。

このように「折れ線2本」「折れ線3本」のボタンが追加され、それらを押してそれぞれ2本、3本つながった折れ線が表示されればOK。
(「折れ線2本」「折れ線3本」のボタンから呼び出すのも「線」と同じdrawLines関数で、引数の値だけが異なる。そのため、program.jsの方は全く変えなくてよい)
index.htmlとprogram.jsに以下のものを追加してブラウザを更新する。

(program.jsの最後に追加。コピペ可)
(rect関数が長方形を描く命令。4つの引数はそれぞれ1つの頂点の x, y座標、横幅、高さにあたる)
```
function drawRect() {
    var x1 = Math.random() * canvas.width;
    var y1 = Math.random() * canvas.height;
    var x2 = Math.random() * canvas.width;
    var y2 = Math.random() * canvas.height;
    ctx.strokeStyle = "black";
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.rect(x1, y1, x2 - x1, y2 - y1);
    ctx.stroke();
    ctx.fillStyle = getRandomColor();
    ctx.fill();
}
```
このように「長方形」のボタンが追加され、それを押してランダムな形の長方形が表示されればOK。
index.htmlとprogram.jsに以下のものを追加してブラウザを更新する。
(「長方形」の関数のカッコの中に「false」を追加し、その下に「グラデーション長方形」用のボタンを追加)

(drawRect関数に赤枠の部分を追加する)
(普通の長方形とグラデーション長方形を描く命令の違いは少しだけなので、if～elseで場合分けする)
(49行目で始点の色、50行目で終点の色を指定している)

このように「グラデーション長方形」のボタンが追加され、「長方形」ボタンでは単色の、「グラデーション長方形」ではグラデーションのかかった長方形が表示されればOK。
(gifアニメ画像の機能的な問題のせいでグラデーションの方は色の境目の線が見えているが、実際はなめらかなグラデーションになる。)
index.htmlとprogram.jsに以下のものを追加してブラウザを更新する。

(program.jsの最後に追加。コピペ可)
(「arc」で円を表示させている。「rect」と同様、こちらも円の枠を描いているだけ。塗りつぶしは最後の「fill」で行っている)
(引数は順に中心の横位置、中心の縦位置、半径、開始角度、終了角度を表わす。最後の2つの引数を0と2π、つまり360°にすることで円になる。これらを半端な値にすれば円弧になる)
```
function drawCircle() {
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var r = Math.random() * canvas.height / 2;
    ctx.strokeStyle = "black";
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.stroke();
    ctx.fillStyle = getRandomColor();
    ctx.fill();
}
```
このように「円」のボタンが追加され、それを押してランダムな大きさの円が表示されればOK。
index.htmlとprogram.jsに以下のものを追加してブラウザを更新する。
(「円」の関数のカッコの中に「false」を追加し、その下に「グラデーション円」用のボタンを追加)

(drawCircle関数に赤枠の部分を追加する)
(普通の円とグラデーション円を描く命令の違いは少しだけなので、if～elseで場合分けする)
(elseのブロックの中はグラデーション長方形のものと似ているが少しだけ異なる)
(68行目は円形のグラデーションを作る命令で、第1～3引数が内側の円の中心と半径、第4～6引数が外側の円の中心と半径。ここでは内側の半径を0、外側の半径を描画する円と同じにしているので、中心から外にむけて滑らかに色が変化する)
(69行目が円の中心の色、70行目が円周部の色になる。直線的なグラデーションのときと同様、0と1の間のところでの色を指定すれば、複雑な色の変わり方をさせることもできる)

このように「グラデーション円」のボタンが追加され、「円」ボタンでは単色の、「グラデーション円」ではグラデーションのかかった円が表示されればOK。
(gifアニメ画像の機能的な問題のせいでグラデーションの方は色の境目の線が見えているが、実際はなめらかなグラデーションになる。)

課題7　Canvas

課題7-1

課題7-2

提出

課題7 Canvas

課題7-1

課題7-2

提出

課題7　Canvas