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>
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
WEBで画像や図を扱う機会はとても増えています。canvasはよく利用される機能ですので、ぜひ身に着けてください。
監修してくれたメンター
| 小宮山晃史（こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
