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

Square business abstract background, corporate print template. Vector

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

目次

1.canvas要素
2.canvasに図形を描く

1.canvas要素

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

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

▲目次へ戻る

2.canvasに図形を描く

canvas要素を使って、次のような図形を描いてみましょう。
colmun_image3251_01

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() {
var cnvs = document.getElementById(‘canvas1’);
var ctx = cnvs.getContext(‘2d’);

ctx.strokeStyle = ….. /* ここにの内容を書く */
}

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

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

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

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

2.canvasに図形を描く

 

四角形を描く

colmun_image3251_02
四角形は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に図形を描く

 

三角形を描く

colmun_image3251_03
多角形はパス(線)で描きます。これは、直線か曲線かの違いはありますが、円や曲線も同じです。

多角形のパスの描き方は、
・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に図形を描く

 

円を描く

colmun_image3251_04
円弧は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に図形を描く

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です