JavaScriptによる図形描画入門を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptによる図形描画入門について現役エンジニアが解説しています。HTML5から追加されたCanvasを使って図形やゲームなどを作成することが出来ます。Canvasの基本の使い方から、四角形や円などの図形を描いたり、線を引いてみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptによる図形描画入門について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(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)

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

<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)";
//体部分の中心に3つ
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 'MS ゴシック'";
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を使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。