JavaScriptによる図形描画入門を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptによる図形描画入門について現役エンジニアが解説しています。HTML5から追加されたCanvasを使って図形やゲームなどを作成することが出来ます。Canvasの基本の使い方から、四角形や円などの図形を描いたり、線を引いてみましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptによる図形描画入門について解説します。
実際のコードをもとに解説していきますので、理解を深めていきましょう。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptによる図形描画入門について詳しく説明していくね！
お願いします！
Canvasとは
HTML5から追加された要素で、JavaScriptとの組み合わせで図形を描画する事が出来ます。また、図形を動かすこともできるので、ゲーム等にも多く利用されます。
ただし、使えないブラウザもあるので注意しましょう。
JavaScriptで図形を描画する方法
<canvas></canvas<で指定した領域を「document.getElementById()」でオブジェクト化します。続いて、getContext関数を使い書くためのコンテキストをオブジェクト化します。作成されたContextを用いて、図形を描写していきます。
キャンパスサイズは、デフォルトは300px * 150pxですが、width/heightプロパティで変更できます。ただし、HTML全体で管理しているキャンバスのサイズとキャンバス内図で管理しているサイズが違うため変更する際は注意が必要になります。
CSSや”style.width”でサイズを変更しただけだと、描いた図形が正しく描写されません。”clientWidth”でサイズをHTML側のサイズを取得し、キャンバス内のサイズに設定してあげる必要があります。
では、図形を描写する際に良く使うプロパティと関数を幾つかご説明します。
プロパティ
- 線の色 “strokestyle”
- 線の太さ “lineWidth”
- 線の端 “lineCap”
- 塗りつぶしの色 “fillStyle”
- フォント “font”
- 影 “shadowBlur”
- 影の色 “shadowColor”
- 影の幅 “shadowOffsetX”
- 影の高さ “shadowOffsetY”
メソッド
塗りつぶし四角形
fillRect(x, y, width, height)
塗りつぶしでない四角形
strokeRect(x, y, width, height)
円
arc(x, y, radius, startAngle, endAngle, anticlockwise)
x, y :中心の位置
radius :半径
startAngle :開始位置の角度（ラジアン単位で指定
endAngle :終点位置の角度（ラジアン単位で指定）
※”Angle（角度） * Math.PI / 180″で算出できます）
※Angle（角度）右水平位置が”0″になります。
anticlockwise :描写していく方向（true→反時計回り、false→時計回り
線
lineTo(x,y)
実際に書いてみよう
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptによる図形描画入門</title>
<style type="text/css">
html {
font-size: 62.5%;
text-align: center;
}
h1 {
font-size: 4rem;
}
#canvas-area {
width: 500px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
</style>
</head>
<body>
<h1>JavaScriptによる図形描画入門</h1>
<canvas id="canvas-area"></canvas>
<script type="text/javascript">
//描画コンテキストの取得
var canvas = document.getElementById('canvas-area');
if (canvas.getContext) {
var context = canvas.getContext('2d');
//キャンバスのサイズを取得
const width= canvas.clientWidth;
const height= canvas.clientHeight;
//キャンバスのサイズ(CSSで指定したキャンバスのサイズをキャンバス内に反映)
canvas.width = 500;
canvas.height = 500;
//図形のサイズを指定
const body_size = 120;
const face_size = 90;
const eye_size = 10;
const mouth_size = 60;
const button_size = 20;
//キャンバスの背景色
canvas.style.backgroundColor = "rgb(0,255,255)";
//胴体と顔を描く
//色を指定する（白）
context.fillStyle = "rgb(255,255,255)";
//キャンバスの中心
context.beginPath();
context.arc(width/2, height - body_size - 30, body_size,0 * Math.PI / 180, 360 * Math.PI / 180,true);
context.arc(width/2, height - (body_size*2) - face_size, face_size,0 * Math.PI / 180, 360 * Math.PI / 180,true);
context.fill();
//ボタンを描く
//色を指定する（黄色）
context.fillStyle = "rgb(255,255,0)";
//体部分の中心に３つ
for (var i = 1; i < 4; i++){
context.beginPath();
context.arc(width/2, height - (body_size*2) + ((button_size*2+5)*i) , button_size,0 * Math.PI / 180, 360 * Math.PI / 180,true);
context.fill();
}
//目を描く
//色を指定する（黒）
context.fillStyle = "rgb(0,0,0)";
//顔部分の中心の少し上（左右）
context.beginPath();
context.arc(width/2 - 30, height - (body_size*2) - face_size - 15, eye_size,0 * Math.PI / 180, 360 * Math.PI / 180,true);
context.fill();
context.beginPath();
context.arc(width/2 + 30, height - (body_size*2) - face_size - 15, eye_size,0 * Math.PI / 180, 360 * Math.PI / 180,true);
context.fill();
//鼻を描く
//色を指定する（黒）
context.fillStyle = "rgb(0,0,0)";
//顔部分の中心に描く
context.beginPath();
context.fillRect(width/2 - (10/2), height - (body_size*2) - face_size + 5, 10, 20);
//口を描く
//色を指定する（黒）
context.fillStyle = "rgb(0,0,0)";
//顔部分の少し下で右側から始まり反対で止まり、線だけ表示
context.beginPath();
context.arc(width/2, height - (body_size*2) - face_size + 5, mouth_size,0 * Math.PI / 180, 180 * Math.PI / 180,false);
context.stroke();
//帽子を描く
//色を指定する（赤）
context.fillStyle = "rgb(255,0,0)";
//顔部分の少し下で右側から始まり反対で止まり、線だけ表示
//回転させる
//キャンバス自体を回転させて、絵を描く
context.save(); //初めに今のキャンバス情報を取得
// 起点をこれから描画する矩形の中心に移動させる
context.translate(width/2 + 40, height - (body_size*2) - (face_size*2) - 40);
// canvasを40度回転
context.rotate(40 * Math.PI / 180);
context.beginPath();
//開始座標
context.moveTo(00, height - (body_size*2) - (face_size*2) - 28);
//一本目の線の終点
context.lineTo(100, height - (body_size*2) - (face_size*2) - 28);
//二本目の線の終点
context.lineTo(50, height - (body_size*2) - (face_size*2) - 128);
//終点と開始点を結んでしめる
context.closePath();
//描写
context.fill();
//キャンバスの情報を元に戻す
context.restore();
//テキストを表示
context.strokeStyle = "rgb(100,100,255)";
context.font = "20px 'ＭＳ ゴシック'";
context.textAlign = "left";
context.textBaseline = "top";
context.strokeText("Hello JavaSclipt!", width/2 + mouth_size, height - (body_size*2) - face_size +30);
}
</script>
</body>
</html>
今回は、雪だるまを書いてみました。canvasにはさまざまなテクニックがり、動きのあるサイトなども可能ですので、是非とも勉強して挑戦してみて下さい。
筆者プロフィール
| 小宮山晃史（こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
