JavaScriptのCanvas APIを使って<canvas>~</canvas>タグで指定された領域に以下の国旗を描画してください。
課題１ イタリア国旗
- 国名「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
図形の描画についての章では、既定の線と塗りつぶしのスタイルのみを使用しました。ここでは、私たちの絵を少しでも魅力的にするために、自由に使えるキャンバスのオプションについて探っていきます。色、線のスタイ...
developer.mozilla.org
課題２ ガーナ共和国国旗
- 国名「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メソッドを使ってパスを作成し、塗りつぶせば複雑な図形にも対応できる。
星型描画の考え方は以下を参照
コメント