JavaScriptにおけるcanvasの利用方法について現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptにおけるcanvasの利用方法について解説しています。canvasはHTML5で図形を描画する要素です。JavaScriptでcanvasを操作する方法、主なプロパティとメソッドを覚えましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptにおけるcanvasの利用方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
canvasの利用方法について詳しく説明していくね！
お願いします！
目次
canvasとは
canvasの使い方
<canvas></canvas>の領域をgetContext関数でオブジェクト化します。あとは、作成されたオブジェクトに対して操作すことで図形を描写することが出来ます。
以下に幾つか操作するためのプロパティとメソッドを記載します
| 線の色 | strokestyle |
| 線の太さ | lineWidth |
| 線の端 | lineCap |
| 塗りつぶしの色 | fillStyle |
| フォント | font |
| 影 | shadowBlur |
| 影の色 | shadowColor |
| 影の幅 | shadowOffsetX |
| 影の高さ | shadowOffsetY |
|
塗りつぶし四角形
|
fillRect(x, y, width, height) x, y :左上の視点 width, height :縦横の長さ |
| 塗りつぶしでない四角形 | strokeRect(x, y, width, height) 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) 開始 |
canvasを利用して図形を描画してみよう
<html>
<head>
<meta charset="UTF-8">
<title>canvas 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>雪だるま</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>
まとめ
WEBで画像や図を扱う機会はとても増えています。canvasはよく利用される機能ですので、ぜひ身に着けてください。
監修してくれたメンター
| 小宮山晃史（こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
