JavaScriptで図形を作りたい!Canvasの実践的な活用方法を伝授


JavaScriptってどうやれば図形を描画できるんだろう
Canvasの活用方法がイマイチ理解できない
効率よく図形を描画できるライブラリを上手く使いたい

JavaScriptは基本的な構文だけでなく、Canvas APIを活用することで本格的な図形描画を作ることも可能です。

ただし、Canvasを使ったプログラミングは一般的なDOM操作の構文とは少し違うので、なかなか思うように勉強が進まないという人も少なくありません。このような図形描画に関する学習はどのように進めるのが良いのでしょうか?

そこで、この記事では初心者でも今日からJavaScriptによる図形描画プログラミング手法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がJavaScriptの不安を解消できれば幸いです。

Canvasの基本

この章では、JavaScriptで図形を描画するために使うCanvasの基本について見ていきましょう。主に、導入から描画メソッドの使い方について学んでいきます。

Canvasの使い方

それでは、基本的なCanvasの使い方から見ていきましょう!

Canvasの導入は主に2通りの方法があり、もっとも一般的なのはcanvasタグをHTMLに挿入する方法です。


Canvasで描画できる画面サイズを設定するために、width / height属性を一緒に指定するのが便利です(外部CSSで指定も可能)

あとは、普通にHTML要素を取得するようにgetElementById()などを使えば、JavaScriptからCanvasを扱うことができるようになります。

もう1つ導入方法としては、createElement()メソッドを利用して動的にCanvas要素を生成する方法です。

const canvas = document.createElement('canvas');

canvas.width = 600;
canvas.height = 400;

Canvasを生成したらwidth / heightプロパティを利用して、画面サイズを指定するのを忘れないようにしましょう。

また、動的に生成した場合はappendChild()メソッドなどを利用してHTMLに出力しないと利用できない点には注意が必要です。

document.body.appendChild(canvas);

図形を描画する方法

Canvasを利用してJavaScriptで図形を作成するには、まず最初に図形を描画するための2Dコンテキストを取得する必要があります。

このコンテキストを利用することで、さまざまな図形を描画できるようになります。実際のプログラム例は次のようになります。

const ctx = canvas.getContext('2d');

getContext()メソッドをCanvas要素に対して実行することで取得できます。

これにより、例えば四角形を描画したければ次のように記述できるようになります。

ctx.strokeRect(10,10,100,100);

strokeRect()メソッドは、引数に指定したX・Y座標と幅・高さを元に四角形を描画してくれます。

Canvas APIでは他にもさまざまなメソッドが提供されています。

メソッド名内容
strokeRect()四角形
fillRect()塗りつぶしの四角形
arc()さまざまな円
strokeText()輪郭線のみのテキスト
fillText()塗りつぶしのテキスト
drawImage()画像の描画

このなかで円を描画するには少し注意点が必要です。

strokeRect()などは引数を設定するだけで描画までしてくれましたが、arc()メソッドはどんな円を描くかを指定するだけで描画まではしてくれません。そのため、stroke() / fill()などのメソッドを実行することで描画を行います。

次の例を見てください。

ctx.beginPath();
ctx.arc(60,190,50,0,2 * Math.PI);
ctx.stroke();

この例では半径50の円を描画していますが、stroke()を実行した時点で描画されるという点に注意しましょう。

また、テキストを描画する際もポイントがあり、fontプロパティで事前に文字の大きさやフォントスタイルを指定しておきましょう。

ctx.font = "48px serif";
ctx.strokeText('Hello Canvas',300,50);

fontプロパティが無いと正常に表示されない場合があるので、忘れないように設定しておく必要があります。

ここまでのサンプルデモを以下に掲載しておきますので、ソースコードと一緒に確認をしておくと良いでしょう。

See the Pen Canvas API(Basic Sample) by sato ken (@s_masato) on CodePen.0

図形の操作

この章では、もう少し高度な図形操作について見ていきましょう。主に、図形のアニメーションやマウスによる制御について学んでいきます。

Canvasに描画した図形を動かすには?

Canvasを利用して図形を描画できるようになったら、次にその図形を動かす方法について学んでいきましょう。

もっとも基本的な方法としては、繰り返し処理で図形の座標を変化させることでアニメーションさせることでしょう。一般的な図形は以下のようにX・Y座標を指定しますよね?

ctx.fillRect(【X座標】,【Y座標】, 100, 100); 

この座標を動かしたい方向に少しずつ変えていくことで、図形が動いているように見えるというわけです。

ただし、グラフィック処理はCPUの負担が大きくなる傾向にあるため、無理やり一定間隔で動かそうとすると処理落ちしてカクカクした動きになりがちです。そこで、JavaScriptにはアニメーションに最適なメソッドが提供されています。

次のサンプル例を見てください。

function draw() {
 
    // ここに処理を記述する
 
 
    window.requestAnimationFrame(draw);
}
  
draw();

requestAnimationFrame()メソッドを利用すると、各ブラウザごとにユーザーの環境に応じたアニメーションの最適化をしながら図形などを動かすことが可能です。

例えば、図形のX座標を1ずつ変えながら右方向へアニメーションさせたい場合は次のようになります。

let x = 0;
 
function draw() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.fillRect(x++,50, 100, 100);
    
    window.requestAnimationFrame(draw);
}
  
draw();

clearRect()メソッドの引数で画面全体を指定していますが、これは図形が動いたあとに画面をリセットするためです。リセットしないと、前に動いた図形がそのまま残ってしまいアニメーションにならないからです。

これらの基本的な仕組みを活用した図形のアニメーションサンプルを、以下に掲載しているのでぜひ参考にしてみてください。

See the Pen Canvas API(basic animation) by sato ken (@s_masato) on CodePen.0

図形を回転させてみよう

今度は、描画した図形を回転させる方法について見ていきましょう。

もっとも簡単な方法としては、Canvas APIで提供されているrotate()メソッドを利用する方法です。引数にはラジアン単位の角度を指定するだけです。

ctx.rotate(45 * Math.PI / 180);

回転させたい角度に【Math.PI / 180】を掛ければ良いので、上記の場合だと45度に回転します。

ただし、重要なポイントがあります!

それは、rotate()メソッドが常にCanvasを原点にして回転するということです。つまり、対象となる図形がそのまま回転するのではなく、あくまでCanvasの原点を軸にして回転するだけです。

大抵の場合は、図形をそのまま回転させたいはずなので、これを実現するにはtranslate()メソッドで原点を移動させる必要があります。

例えば、次のような四角形があるとします。

ctx.strokeRect(150, 100, 200, 200);

translate()を利用して回転する原点を図形の中心にするには、【X座標+幅÷2】【Y座標+高さ÷2】という計算式で求められます。

次の例を見てください!

const x = 150 + 200 / 2;
const y = 100 + 200 / 2;

ctx.translate(x, y);
ctx.rotate(45 * Math.PI / 180);
ctx.translate(-x, -y);

図形の中心を求めるX・Y座標を求めたら、translate()メソッドの引数に設定してからrotate()を実行するわけです。最後に、もう一度translate()をマイナス値にして元にもどせば回転は完了です。

この仕組みを活用したサンプルデモを以下に掲載しておくので、ぜひソースコードと合わせてチェックしてみてください!

See the Pen Canvas Sample(rotate basic) by sato ken (@s_masato) on CodePen.0

ライブラリの活用

この章では、図形を効率よく描画できるライブラリの活用について見ていきましょう。主に、ライブラリの導入方法や実際のプログラミング手法について学んでいきます。

図形を描画できるライブラリの導入

仮想DOMなど最近のトレンドも取り入れた高速・軽量な図形描画ライブラリを使ったプログラミング手法について見ていきましょう。

【GraphicsJS】

GraphicsJSはCanvas APIを利用した図形描画によく似た感覚で利用できるのですが、扱い方が非常に簡単であり記述も簡略化できる特徴があります。

基本的な使い方としては、まず最初にscriptタグで以下のライブラリを読み込むことから始めます。

https://cdn.anychart.com/js/latest/graphics.min.js

次に、HTMLへ図形を描画するための領域をdivタグで挿入します。

基本的な準備はここまでで完了です。

あとはJavaScriptから図形を描画するためのプログラミングを行うのですが、一番最初に次のような初期化処理を実行します。

const stage = acgraph.create('stage');

これでGraphicsJSのインスタンスが作成されて、さまざまな図形描画メソッドを利用できるようになるわけです。

図形描画を行う方法

GraphicsJSではさまざまな図形を描画できるように、あらかじめプリセット図形がいくつか用意されてまいす。また、beginPath()やstroke()などを使った面倒な描画手法を使わなくても良くて、例えば四角形と円を描くには次のように記述するだけです。

stage.rect(10, 50, 100, 100);

stage.circle(240, 100, 80);

特に、circle()はCanvas APIよりも簡単に円が描けるので重宝するでしょう。

他にも、以下のようなプリセット図形を利用することができます。

メソッド内容パラメータ
rect四角形X軸、Y軸、幅、高さ
circleX軸、Y軸、半径
crossクロス(十字)図形X軸、Y軸、外半径
diamondダイヤ図形X軸、Y軸、外半径
donutドーナツ図形X軸、Y軸、外側半径、内側半径、開始角度、スイープ角度
star5星形X軸、Y軸、外半径

これらの図形は同じように単独で利用することが可能なので便利です。以下に図形描画のサンプルを掲載しておきますので、ぜひ確認してみてください!

See the Pen GraphicsJS-Basic-Sample by sato ken (@s_masato) on CodePen.0

GraphicsJSでは、カラーのスタイル設定も簡単にできるのでご紹介しておきます。

ポイントはメソッドチェーンを利用して1行で記述できるという点です。例えば、四角形を赤色で塗りつぶしたければ次のように記述します。

stage.rect(100, 100, 80).fill('#f00');

fill()メソッドの引数に任意のカラーを指定するだけです。他にも、stroke()を利用すれば同じように線の色を変更することができます。

また、引数を配列にすればグラデーションカラーも簡単に実現できます。

stage.rect(100, 100, 80).fill(['#f00','#00f'],45);

この例では、配列で赤色と青色を指定しました。そして第2引数に【45】という数値を指定しているのですが、これは45度の角度でグラデーションを描画するという意味になります。

先ほどのサンプル例にカラーのスタイリングを施したのが、以下のデモになるのでぜひ合わせて確認してみてください。

See the Pen GraphicsJS-Color-Sample by sato ken (@s_masato) on CodePen.0

まとめ

今回は、JavaScriptでさまざまな図形を描画・操作する方法について学習しました!

最後に、もう一度ポイントをおさらいしておきましょう!

  • Canvas APIを利用すると自在に図形を描画できる
  • アニメーションや回転など図形を動かすことも可能
  • 図形描画のライブラリを活用すれば効率よく図形描画できる

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説