【canvas】基本的な図形の描画
canvas要素を使って、矩形、円、線、文字の描画を行います。
canavs要素の準備
canvas要素に描画を行うための準備を行います。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
* {
padding: 0;
margin: 0;
}
canvas {
background: #333333;
display: block;
margin: 100px auto;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="670" height="480"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
// 以下に描画処理を追記する
</script>
</body>
</html>全部で26行ありますが、上記のコードの中で重要なのは19行目、21行目と22行目の3行です。まず19行目でcanvas要素をbody要素内に横670px、縦480pxの大きさで設置しています。21行目では設置したcanvas要素をIDを指定して取得し、22行目ではcanvas要素に描画するためのコンテキストを取得しています。canvas要素への描画はこの22行目で取得したcontextを用いて行います。
以下の描画サンプルのJavaScriptのコードは、23行目で書かれている「// 以下に描画処理を追記する」から改行して追記することを前提に書かれています。
矩形（四角形）の描画
canvas内の座標はcanvasの左上を(0, 0)として、右方向にXの正の座標、下方向にYの正の座標として広がっています。四角形を描画するためには、描画したい四角形の左上の座標XYと、そこから延びる横の長さ、縦の長さを指定してあげます。
context.fillStyle = 'lightgreen';
context.fillRect(185, 140, 300, 200);
// context.fillRect(X, Y, 横の長さ, 縦の長さ);上記のコードの結果が以下になります。
円の描画
円の描画では、円の中心座標と半径を指定することで描くことができます。
context.fillStyle = "yellow";
context.arc(335, 240, 130, 0, Math.PI * 2);
// context.arc(X, Y, 半径, 0, Math.PI * 2);
context.fill();上記のコードの実行結果は以下になります。
線の描画 その1
線の描画を行います。はじめに始点の座標をmoveTo関数で指定します。次にlineTo関数で座標を指定すると、始点からの線を1つ引くことができます。そこから次の座標をlineTo関数に渡すと、一筆書きのように次の線が続けて引くことができます。
context.beginPath();
context.moveTo(90, 430);
context.lineTo(200, 225);
context.lineTo(400, 350);
context.lineTo(550, 100);
context.lineWidth = 10;
context.strokeStyle = "pink";
context.stroke();
context.closePath();実行結果は以下になります。
線の描画 その2
2次ベジェ曲線を描画します。始点の座標をmoveTo関数で指定して、quadraticCurveTo関数で制御点の座標、終点の座標を指定することで描画することができます。
context.beginPath();
context.moveTo(100, 50);
// context.moveTo(始点X, 始点Y);
context.quadraticCurveTo(630, 80, 200, 400);
// context.quadraticCurveTo(制御点X, 制御点Y, 終点X, 終点Y);
context.strokeStyle = "pink";
context.lineWidth = 5;
context.stroke();
context.closePath();
// 以下は視覚的に分かりやすくするために描画しています
// 2次ベジェ曲線のみが必要な場合は不要です
// 始点と終点の描画
context.beginPath();
context.arc(100, 50, 5, 0, 2 * Math.PI); // 始点
context.arc(200, 400, 5, 0, 2 * Math.PI); // 終点
context.fillStyle = "blue";
context.fill();
context.closePath();
// 制御点
context.beginPath();
context.arc(630, 80, 5, 0, 2 * Math.PI);
context.fillStyle = "red";
context.fill();
context.closePath();実行結果は以下になります。
文字列の描画
fillText関数を使うと文字列を描画することができます。描画したい文字列と描画開始位置を指定してあげます。
context.beginPath();
context.fillStyle = "skyblue";
context.font = "80px serif";
context.fillText("文字列 abc 123", 70, 260);
// context.fillText("描画したい文字列", X, Y, [オプションで幅の指定も可能]);
context.closePath();実行結果は以下になります。
色の指定方法
これまでのサンプルでは色の名前を使って指定してきました。色の名前一覧は「CSS Color Module Level 3」で定義されています。
名前を指定する方法以外にもカラーコードを指定する方法があります。
context.fillStyle = '#00FF00';その他にも色々な指定方法があります。
// RGBカラー
context.fillStyle = 'rgb(0, 0, 255)';
// RGBAカラー(Aは透明度で0が完全な透明)
context.fillStyle = 'rgba(255, 165, 0, 0.5)';
// HSLカラー(H：色相 [0-360]、S：彩度 [0%-100%]、L：輝度 [0%-100%])
context.fillStyle = 'hsl(120, 100%, 50%)';
// HSLAカラー(Aは透明度で0が完全な透明)
context.fillStyle = 'hsla(300, 100%, 50%, 0.5)';