2018年12月07日

【トレンド】CanvasとJavascriptで図形を描画する方法

Canvasを使用する下準備

Canvasを利用するためには、HTMLファイルとJavascriptファイルが必要です。

mずは、HTMlファイルを作成しましょう。

ここではこのようなコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
    <style>
	 body{
	 	background: #eee;
	 }

      #canvas {
      	width: 640px;
      	height: 480px;
        background: #fff;
      }
    </style>
<body>
<canvas id="canvas"></canvas>

 <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

これでHTMlファイルの準備は完了です。

次にJavascriptのファイルを作成しましょう。

ここでは「js」というフォルダをつくって、その中に「main.js」というファイルを作成します。

まずは、「main.js」にこのようなコードを記述しましょう。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

「var canvas = document.getElementById(‘canvas’);」この記述は、HTMLファイルに記述されているCanvas要素を取得しています。

「getContext」は描画するためのメソッドです。

現在のところ「getContext」の引数は、(‘2d’)だけです。

これで準備は整いました。

次は実際に図形を描画しましょう。

CanvasとJavascriptで図形を描画する

ここでは、CanvasとJavascriptを使って図形を描画しましょう。

図形の描画はJavascriptでおこないます。

実際のコードは下記になります。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 50, 50);

このようにコードを記述するとブラウザではこのように表示されます。

Javascriptで図形を描画は基本的に「getContext(‘2d’)」メソッドを代入した変数に新たなメソッドを記述する形でおこないます。

上記のコードで記述されている「fillStyle」は、図形の塗りの色を指定することが可能です。

ここでは「blue」にしているので、青色に描画されています。

また、「fillStyle」のデフォルトの値は黒色になっているので、「ctx.fillStyle」だけ記述すると黒色の四角形が描画されます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle;
ctx.fillRect(10, 10, 50, 50);

「fillRect」は、図形の位置や横幅・高さを指定するメソッドです。

ctx.fillRect(X座標(図形の横軸の位置), Y座標(図形の縦軸の位置), width(横幅), height(縦幅));

例えば、下記のコードのようにX座標とY座標の値をゼロにすると、描画領域の左上を軸に図形が描画されます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle;
ctx.fillRect(0, 0, 50, 50);

また、下記のコードのように横幅の値を「100」、縦幅の値を「100」にすると四角形の面積が倍になります。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle;
ctx.fillRect(0, 0, 100, 100);

塗りつぶしではなく、枠線だけを描画する場合はこのように記述します。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

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

「strokeRect」メソッドを使用することで、塗りつぶしではなく枠線だけを描画することが可能です。

また、「strokeStyle」メソッドを使用すれば、枠線の色を変更できます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.strokeStyle = 'blue';
ctx.strokeRect(10, 10, 100, 100);

「lineWidth」メソッドで枠線の幅を指定できます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.strokeStyle = 'blue';
ctx.lineWidth = 10;
ctx.strokeRect(10, 10, 100, 100);

ここで注意して欲しいのは、「strokeRect」メソッドの前に「strokeStyle」や「lineWidth」を記述しなければ意味がありません。

例えば、このように「strokeStyle」や「lineWidth」を後に記述した場合このような図形になります。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.strokeRect(10, 10, 100, 100);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 10;

このように、「strokeRect」メソッドの前に「strokeStyle」や「lineWidth」メソッドを記述しても反映されていません。

また、塗りつぶしの四角形や枠線の四角形を描画する場合、このように書き換えることも可能です。

塗りつぶしの四角形

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.rect(10, 10, 100, 100);
ctx.fill();

枠線の四角形

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.rect(10, 10, 100, 100);
ctx.stroke();

パスを使用する

次はパスを使用して図形を描画しましょう。

パスを使用するためには、「beginPath」というメソッドを使用します。

「beginPath」メソッドは、新しいパスの開始もしくは現在のパスをクリアするために使用します。

まずは、「beginPath」メソッドを使用するための準備をしましょう。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();

最初に「beginPath」メソッドを使用するだけで準備完了です。

次は、「beginPath」メソッドで新規作成したパスを任意の場所に移動させましょう。

パスの移動は、「moveTo」メソッドでおこないます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 20);

このコードをブラウザで確認するとこのように表示されます。

パス自体が表示されることはないので、ブラウザで確認しても何も表示されません。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20,100);
ctx.stroke();

「moveTo」メソッドは現在のパスの位置を変更するメソッドです。

今回のコードではx座標に20px、y座標に20px移動させるコードになります。

その移動させたパスを始点に「lineTo」メソッドで線を引いていきます。

ここではx座標に20px、y座標に100pxの線を描画しました。

この線を斜めにしたい場合は。x座標の値を変更すればOKです。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(80,100);
ctx.stroke();

このように「lineTo」メソッドのx座標を変更することで斜めの線を描画できます。

「moveTo」メソッドと「lineTo」メソッドもう1度使用することで、2つの線を描画することが可能です。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20,100);
ctx.moveTo(20, 100);
ctx.lineTo(100,100);
ctx.stroke();

このように、「moveTo」メソッドと「lineTo」メソッドを複数使用することで2本線を描画することも可能です。

続けて「lineTo」メソッドを使うことで、線を描画することもできます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20,100);
ctx.lineTo(100,100);
ctx.stroke();

始点のパスから終点のパスに線を描画したいときは、「closePath」メソッドを使用します。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20,100);
ctx.lineTo(100,100);
ctx.closePath();
ctx.stroke();

始点と終点を結んだ後に「fill」メソッドで描画したモノを塗りつぶすことができます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20,100);
ctx.lineTo(100,100);
ctx.closePath();
ctx.stroke();
ctx.fill();

Canvasで描画できるのは四角形や三角形、線だけではありません。

円形の図を描画することも可能です。

このようなコードで円を描画できます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(50, 50, 10, 0, Math.PI*2, false);
ctx.stroke();

「arc」メソッドは円を描画するためのメソッドです。

「arc」メソッドの引数はこのようになっています。

arc(x座標, y座標, 半径, 円弧の開始角, 円弧の終了角, 描画の方向);

今回のコードでは、x座標を50px、y座標50px、半径を10px、開始角度の終了角度を360度、描画の方向を時計周りにしています。

円も「fill」メソッドを使うことで塗りつぶすことができます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(50, 50, 10, 0, Math.PI*2, false);
ctx.fill();

また、「Math.PI*2」の部分を「Math.PI」に変えると半円を描画することが可能です。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(50, 50, 10, 0, Math.PI, false);
ctx.fill();

上記のコードでは描画の方向の引数を「false」にしているため下半分の円形が描画されています。

これを「true」にすると上半分が描画された円形が表示されます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(50, 50, 10, 0, Math.PI, true);
ctx.fill();

円形は、「Math.PI」の部分を変更することで円を描画する範囲をより細かく指定することが可能です。

例えば、4分の3だけ円形を描画するときは、下記のようにコードを記述っします。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(50, 50, 20, 0*Math.PI, 0.5*Math.PI, true);
ctx.stroke();

円形を4分の1だけ描画するには、このようなコードを記述します。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(50, 50, 20, 0*Math.PI, 1.5*Math.PI, true);
ctx.stroke();

同じように「arcTo」メソッドを使用すると角丸の図形を描画することが可能です。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.arcTo(200, 20, 200, 90, 80);
ctx.lineTo(200,120);
ctx.stroke();

影をつける

ここまでは、図形やパスを利用して描画してきました。

ここからは描画したモノに影をつけていきましょう。

影をつけるためには、「shadowBlur」メソッドを使用します。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.rect(20,20,80,80);
ctx.fillStyle="red";
ctx.shadowColor="black";
ctx.shadowBlur=10;
ctx.fill();

「shadowBlur」メソッドの値は影の大きさを表します。

「shadowBlur」メソッドの値を「100」にすると、このように影が大きくなります。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.rect(20,20,80,80);
ctx.fillStyle="red";
ctx.shadowColor="black";
ctx.shadowBlur=100;
ctx.fill();

文字を描画する

次は文字を描画しましょう。

文字の描画は「font」メソッド・「fillText」メソッド・「strokeText」メソッドを使って描画します。

文字を塗りつぶして描画する場合は、このようなコードを記述します。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.font = "32px serif";
ctx.fillText("Hello world", 20, 60);

「font」メソッドでは文字の大きさとフォント種類を指定できます。

「fillText」メソッドでは、描画する文字の内容と、描画するx座標とy座標を指定することが可能です。

塗りつぶさない場合は、「strokeText」メソッドを使用することで描画できます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.font = "32px serif";
ctx.strokeText("Hello world", 20, 60);

同じように「strokeStyle」メソッドを記述することで、塗りの色や枠の色を変えることができます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.font = "32px serif";
ctx.fillStyle = 'red';
ctx.fillText("Hello world", 20, 60);

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.font = "32px serif";
ctx.strokeStyle = 'red';
ctx.strokeText("Hello world", 20, 60);

まとめ

いかがでしたか？

今回はCanvasとJavascriptで描画する方法を紹介しました。

Canvasを使用しているWEBサイトは増えてきているので、この機会に習得してみてはいかがでしょう。

【トレンド】CanvasとJavascriptで図形を描画する方法

Canvasを使用する下準備

CanvasとJavascriptで図形を描画する

パスを使用する

影をつける

文字を描画する

まとめ

営業日や診療日カレンダーをWEBサイトで表示させる方法3選

コーディングの指示書の書き方と指示出しに使いやすいツールご紹介

WordPress構築時のコーディング指示書＜ディレクトリマップの作り方＞

WordPressのフォームからメールが届かない時に使うプラグイン

WordPressブロックテーマの基本機能や管理画面を解説