JavaScript課題:canvasに国旗を描画する

JavaScript

JavaScriptのCanvas APIを使って<canvas>~</canvas>タグで指定された領域に以下の国旗を描画してください。

課題1 イタリア国旗

  • 国名「Italy」が描画されている
  • イタリア国旗が描かれている(色 緑:#009246, 白:#FFF, 赤:#CE2B37)
  • 幅と高さは問わない

イメージ

解答例

index.html

<!DOCTYPE html>
<html lang="ja">
<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="style.css">
    <script src="main.js"></script>
    <title>キャンバス国旗を描く - イタリア</title>
</head>
<body>
    <canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

canvas{
    background-color: #ddd;
}

main.js

// main.js
function drawFlagOfItaly(){
    // キャンバスの初期設定
    const canvas = document.getElementById("canvas");
    const g = canvas.getContext("2d");

    // 画面をクリア
    g.clearRect(0, 0, canvas.width, canvas.height);

    // 国名描画
    g.fillStyle = "#555";
    g.font = "bold 22px System";
    g.textBaseline = "top";            // 文字のベースラインを上に
    g.fillText("Italy", 12, 12);

    // 影がついたようにみせる
    g.shadowOffsetX = 10;
    g.shadowOffsetY = 10;
    g.shadowBlur = 10;
    g.shadowColor = "rgba(0, 0, 0, 0.4)";

    g.fillStyle = "#000";
    g.fillRect(50, 50, 300, 200);
    g.shadowColor = "rgba(0, 0, 0, 0)";

    // イタリア国旗を描画
    g.fillStyle = "#009246";    // 左   緑部分
    g.fillRect(50, 50, 100, 200);
    g.fillStyle = "#FFF";       // 中央 白部分
    g.fillRect(150, 50, 100, 200);
    g.fillStyle = "#CE2B37";    // 右   赤部分
    g.fillRect(250, 50, 100, 200);

}

window.addEventListener("load", drawFlagOfItaly);

ソースコード補足

背景色はCSS側で設定した。
基本はfillRectを利用して3色塗りつぶし描画している。

見栄えをよくするために影をつけた。
これには以下MDNのサイトを参考にした。

スタイルと色の適用 - Web API | MDN
図形の描画についての章では、既定の線と塗りつぶしのスタイルのみを使用しました。ここでは、私たちの絵を少しでも魅力的にする...

課題2 ガーナ共和国国旗

  • 国名「Republic of Ghana」が描画されている
  • ガーナ共和国国旗が描かれている(色 赤:#CE1126, 黄:#FCD116, 緑:#CE2B37, ★:#000)
  • 幅と高さは問わない

イメージ

解答例

index.html

<!DOCTYPE html>
<html lang="ja">
<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="style.css">
    <script src="main.js"></script>
    <title>キャンバス国旗を描く - ガーナ共和国</title>
</head>
<body>
    <canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

canvas{
    background-color: #ddd;
}

main.js

// main.js
let canvas, g;

// 星を描画する関数(中心x座標、中心y座標、半径、色)
const drawStar = function(cx, cy, r, color){
    let theta = -90;    // 角度修正(キャンバスでは3時方向が0度扱いのため12時方向を0度とする)
    let star = [];

    while(theta<360-90){   // 星の5つの頂点を求める
        const pos = {
            x: r * Math.cos(theta*Math.PI/180) + cx,
            y: r * Math.sin(theta*Math.PI/180) + cy,
        };
        star.push(pos);
        theta += 72;    // 次の点の位置:360度 ÷ 5 = 72度
    }

    // 星を描画する
    g.fillStyle = color;
    g.beginPath();
    g.moveTo(star[0].x, star[0].y);
    g.lineTo(star[2].x, star[2].y);
    g.lineTo(star[4].x, star[4].y);
    g.lineTo(star[1].x, star[1].y);
    g.lineTo(star[3].x, star[3].y);
    g.closePath();  // パスを閉じる
    g.fill();
}

function drawFlagOfGhana(){
    // キャンバスの初期設定
    canvas = document.getElementById("canvas");
    g = canvas.getContext("2d");

    // 画面をクリア
    g.clearRect(0, 0, canvas.width, canvas.height);

    // 国名描画
    g.fillStyle = "#555";
    g.font = "bold 22px System";
    g.textBaseline = "top";            // 文字のベースラインを上に
    g.fillText("Republic of Ghana", 12, 12);

    // 影がついたようにみせる
    g.shadowOffsetX = 10;
    g.shadowOffsetY = 10;
    g.shadowBlur = 10;
    g.shadowColor = "rgba(0, 0, 0, 0.4)";

    g.fillStyle = "#000";
    g.fillRect(50, 50, 300, 195);
    g.shadowColor = "rgba(0, 0, 0, 0)";

    // ガーナ共和国国旗を描画
    g.fillStyle = "#CE1126";    // 上   赤部分
    g.fillRect(50, 50, 300, 65);
    g.fillStyle = "#FCD116";       // 中央 黄部分
    g.fillRect(50, 115, 300, 65);
    g.fillStyle = "#006B3F";    // 下   緑部分
    g.fillRect(50, 180, 300, 65);

    // 中央の星部分
    drawStar(200, 151, 36, "black");
}

window.addEventListener("load", drawFlagOfGhana);

ソースコード補足

たぶん一番面倒な部分が中央の★の描画。
そこで中央の黒い★部分の描画は、適当に座標を決定するのではなく、きちんと星の頂点座標を求めるために関数drawStarを作成した。

基本的にはmotoToメソッドとlineToメソッドを使ってパスを作成し、塗りつぶせば複雑な図形にも対応できる。

星型描画の考え方は以下を参照

コメント

タイトルとURLをコピーしました