課題7 Canvas

課題7-1

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

  1. デスクトップに「課題7」フォルダーを作り、その中に「1」「2」フォルダーを作る。
  2. Visual Studio Codeを起動する。
  3. 「File」→「Preferences」→「Settings」で設定メニューを出し、「render whitespace」で検索して設定を「all」に変える。


  4. Visual Studio Codeで「File」→「Open Folder」で「課題7」フォルダーを開く。
  5. 「課題7」の中の「1」フォルダーの中に「index.html」「main.css」「program.jp」という3つのファイルを作る。
  6. 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>

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

  8. 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。


  9. index.htmlに以下のものを追加してブラウザを更新する。


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


  10. 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。


  11. index.htmlとprogram.jsに以下のものを追加してブラウザを更新する。
    (「長方形」の関数のカッコの中に「false」を追加し、その下に「グラデーション長方形」用のボタンを追加)


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


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


  12. 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。


  13. index.htmlとprogram.jsに以下のものを追加してブラウザを更新する。
    (「円」の関数のカッコの中に「false」を追加し、その下に「グラデーション円」用のボタンを追加)


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


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

課題7-2

  1. 「2」フォルダの中にindex.html, main.css, program.jsを作る。
  2. ファイルを編集し、オリジナルのページを作る。

課題の条件
注意 (この課題限定ではなく、Webページ全般について)
以下に例を挙げるが、これらはあくまで参考用。全く同じものはNG。

例1
index.html
(12行目の onload で clearCanvas と initImage の2つの関数を呼んでいる (initImageの役割は後述))


main.css
(キャンバスに枠を表示する)


program.js
(clearCanvas関数は課題7-1と同じ)
(initImage関数で変数 img に画像を読み込む。最初にこれを実行しておくことで、読み込みの遅延なしに画像を何度でも表示させられる)
(drawString関数で文字を描画する。27行目と29行目がそれぞれ「黒文字」「中抜き文字」ボタンがクリックされたときに実行される命令)
(drawCatspaw関数で画像を描画する。実際の描画を行っているのは39行目のdrawImage関数。大きさは50~100の範囲の乱数)




例2 (main.cssは課題7-1と同じ)
index.html
(課題7-1と同様に、読み込み時にclearCanvas関数を呼ぶ)
(どちらの国旗も公式で横・縦の比が3:2なので、キャンバスのサイズもそれに合わせてある)


program.js
(clearCanvas関数は課題7-1と同じ)
(日本の国旗の赤丸の描画にarc関数を使う。半径は高さの30% (サイズ、色の参考 : 日本の国旗 (Wikipedia)))
(フランスの国旗は色を変えた長方形を描くだけでできる (サイズ・色の参考 : フランスの国旗 (Wikipedia)))
(17行目と34行目は幅を変える命令。2つの国旗の縦横比が同じなのでこの場合は不要だが、形の違うものを追加できるように入れてある)
(drawJapan, drawFranceの最後の2行で、キャンバスの前の文字を書き換えている)


index.htmlに「<input type="button" value="アメリカ" onClick="drawAmerica();">」を追加し、program.jsに以下のものを追加すれば、アメリカの国旗も表示できる。
(ここまで複雑でなくても、drawStar関数は星形のものを描くのに使える)


(アメリカの国旗の縦横比は1:1.9なので、縦の長さ400ピクセルに対して横の長さは760ピクセル。日本・フランスとは形が違う (形の参考 : 星条旗について))


例3 (main.cssは例1と同じ)
index.html
(selectタグで囲んだものの中にoptionタグで囲んだ選択肢を書いてセレクトボックスを作っている)
(16行目のoptionタグに「selected」を入れることで、ページ読み込み時にこの項目「三角形」が選ばれた状態になる)
(セレクトボックスで何かを選び直すと、onchangeプロパティに入れた関数が実行される)


program.js
(18行目でセレクトボックスで選択中のものの "value" の値 (3~8) を n に入れている)
(多角形の頂点の座標 (x, y) を三角関数で計算し、lineToでつないでいる)
(26行目のclosePathを実行することで、終点と始点をつなぐ線が描かれる)


提出

inserted by FC2 system