column

ITコラム

Square business abstract background, corporate print template

プログラミングノウハウ

2017.03.16

HTML【グラフィクス】~canvas要素

canvas要素は、HTML5からの新要素で、JavaScriptで描くグラフィクスを表示する要素です。
今回は、専用ソフト無しでグラフィクスを表示できるcanvas要素についてまとめたいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1.canvas要素

使用する要素 : <canvas> ~ </canvas>
canvas要素の属性 width属性 表示させる幅をピクセルで指定
height属性 表示させる高さピクセルで指定
グローバル属性 id属性、class属性、title属性、style属性など

 
canvas要素の属性は、縦横のサイズを決める width属性とheight属性だけです。
この他、通常はid属性で名前を付けておいて、JavaScriptによる描画と関連付けを行います。
canvas要素は、JavaScriptとセットで使用します。

▲目次へ戻る

2.canvasに図形を描く

canvas要素を使って、次のような図形を描いてみましょう。
HTML グラフィクス canvas要素 プログラマカレッジ

canvas要素を使って上の図形を描く場合、以下の手順で作業を進めます。

・canvas要素で図形を描く場所を指定する
・JavaScriptの実行のタイミングを決めてfunctionを作成する
・2Dコンテキストを取得する
・四角形を描く
・三角形を描く
・円を描く

▲目次へ戻る

canvas要素で図形を描く場所を指定する

canvas要素で、HTML上に、図形を表示する場所を確保します。
width属性、height属性でサイズ指定して、id属性で名前を付けます。
<canvas> ~ </canvas>間に、未対応ブラウザ対策として代替コンテンツを入れます。
canvas要素に対応したブラウザでは、代替コンテンツは表示されません。

<canvas id="canvas1" width="678" height="200">
お使いのブラウザはcanvas要素に対応していないので描画できませんでした
</canvas>

これで、透明な四角いキャンバスが画面上にできます。
canvas要素でしていした領域の左上の角が描画の基準点(x=0, y=0)となります。

2.canvasに図形を描く

 

JavaScriptの実行のタイミングを決めてfunctionを作成する

JavaScriptの実行のタイミング は、グラフィクスを表示するだけの場合は通常「onload = function()」を使います。
これは、HTMLファイルがロードされたタイミングで実行する、という指令です。
HTML要素をクリックした時に実行したければ、HTML要素に「onclick=”関数名()”」で指定します。

実行するfunction(関数)は、function 関数名() { } で、{ } の中に、図形などのグラフィクス描画する命令を書いていきます。
関数名は、任意な名前でOKです。

<script>
onload = function() {
    sample();
};
 
function sample() {
 /* ここに描画の命令を書いていきます */
}
</script>

HTMLファイルに JavaScriptを書く場所は、HTMLファイルのhead要素部分に書いても良いですが、functionを複数書く場合などは、外部ファイル(.jsファイル)にして、head要素内で読み込んだ方がメンテナンスし易いです。
どちらの場合でも、script要素内に書きます。

2.canvasに図形を描く

 

2Dコンテキストを取得する

実行するfunctionの中身を書いていきます。
まず、canvas要素のお約束で、2Dコンテキストの指定をします。

function sample() {
    let cnvs = document.getElementById('canvas1');
    let ctx = cnvs.getContext('2d');
 
    ctx.strokeStyle = ..... /* ここにの内容を書く */
}

let cnvs = document.getElementById(‘canvas1’);は、対象にするcanvasを指定しています。
canvas要素に付けたID名を呼び出して、そのcanvas要素を、ここではcnvsという変数に代入しています。変数名は任意に付けます。

let ctx = cnvs.getContext(‘2d’);は、対象となるcanvasを、2D(2次元=平面)グラフィクスとして扱うと指定しています。
canvas要素のために用意されている、2Dコンテキストを取得するための指定です。
そして、その2Dで扱うグラフィクスを、変数ctxと命名しています。この変数名も任意に付けます。

ちなみに、上記の2行をまとめてlet ctx = document.getElementById(‘canvas1’).getContext(‘2d’);と書くこともできます。
変数が1つのみなので、こちらの方が命名の手間は半分になります。

以後、この変数ctxを使って、ctx.strokeStyle = . . .というようにグラフィクスを指定していきます。
そうすると、canvas1という名のcanvas要素への描画用であると指定できます。

2.canvasに図形を描く

 

四角形を描く

HTML グラフィクス canvas要素 プログラマカレッジ
四角形はRectで表します。Rect は Rectangle(矩形、長方形)の略です。
strokeRect(x,y,w,h); で、線による四角形を描きます。

x,yは四角形の左上の角の座標です。座標の基準はcanvas領域の左上を(x=0, y=0)とします。
wは四角形の幅で、hは高さです。どちらもピクセルで指定します。
fillRect(x,y,w,h); で、塗つぶしの四角形を描きます。
clearRect(x,y,w,h); で、その四角形の領域をクリア(透明に抜く)にします。

上記の四角形の指定だけだと、clearRect以外はデフォルトカラーの黒で描画されます。
(strokeRectは黒い線で、fillRectは黒い塗りで表示されます。)
ですので、必要に応じて色指定をします。
線の色指定はstrokeStyle、塗りの色指定はfillStyleで行います。

/* 四角形_線(strokeStyleで線の色、strokeRect(x,y, width,height)で四角形) */
    ctx.strokeStyle = '#326693';
    ctx.strokeRect(35,50, 100,100);
/* 四角形_塗りつぶし(fillStyleで塗りの色、fillRectで四角形) */
    ctx.fillStyle = '#326693';
    ctx.fillRect(170,50, 160,100);
/* 四角形_くりぬき(clearRectでくりぬき) */
    ctx.clearRect(230,60, 40,80);

色指定は必ず描画の前に行います。
描画した後で色指定しても反映されず、真っ黒に表示されます。

2.canvasに図形を描く

 

三角形を描く

HTML グラフィクス canvas要素 プログラマカレッジ
多角形はパス(線)で描きます。これは、直線か曲線かの違いはありますが、円や曲線も同じです。

多角形のパスの描き方は、
・beginPath(); で、描画の開始を宣言
・moveTo(x,y); で、パスの開始点をx,y座標(ピクセル)を指定
・lineTo(x,y); で、直線のパスを引く次の点のx,y座標(ピクセル)を指定
・closePath(); で、始点(moveTo(x,y); の座標)に直線を引いてパスを閉じる
・strokeStyle または fillStyle で、線 or 塗りの色指定をする
・stroke(); または fill(); で、線 or 塗りで描画する

/* 三角形_(多角形はmoveTo(x, y)で始点、lineTo(x, y)で直線、closePath()で始点に戻る) */
    ctx.beginPath();
    ctx.moveTo(428, 40);
    ctx.lineTo(368, 158);
    ctx.lineTo(496, 158);
    ctx.closePath();
    ctx.strokeStyle = '#B20000';
    ctx.stroke();

lineTo(x,y); では、2本しか直線を書いていません。
最後の1本は、closePath();で自動的に始点(moveTo(x,y); の座標)に向かって直線が引かれます。

2.canvasに図形を描く

 

円を描く

HTML グラフィクス canvas要素 プログラマカレッジ
円弧はarcで描きます。arc はそのまんま arc(円弧)です。
円の中心点と半径を決め、始点を決めて、終点を360°のところにすれば円、終点をどこか1点に決めれば円弧になります。

円弧の描き方は、
・beginPath(); で、描画の開始を宣言
・arc(x, y, radius, startAngle, endAngle, anticlockwise); で円弧を指定する
・strokeStyle または fillStyle で線 or 塗りの色指定をする(ここからは多角形の時と同じ)
・stroke(); または fill(); で線 or 塗りで描画 (線と塗りは両方指定可)

arc(x, y, radius, startAngle, endAngle, anticlockwise); について
x, y :円の中心点の座標
radius:円の半径
startAngle:始点を角度(時計の3時にあたるところが0)で指定(ラジアン単位で指定)
endAngle:円弧の終点を角度(時計の3時にあたるところが0)で指定(ラジアン単位で指定)
anticlockwise:円弧を描く方向(trueは反時計回り、falseは時計回り)

1ラジアン=180°/π
公式による指定をして、度数法からラジアンに変換します。
公式では、πをMath.PIで表すので、「度数 * Math.PI/180」で指定できます。

/* 円_塗りつぶし */
    ctx.beginPath();
    ctx.arc(580, 100, 60, 0, Math.PI*2, true);
    ctx.fillStyle = '#B20000';
    ctx.fill();

2.canvasに図形を描く

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ