17/07/11

Canvasを用いて基本的な描画を行ってみる


 

今回は簡単なcanvasの操作についてまとめていきます。
パスとは何かを簡単に解説し、
線、多角形、四角、円弧、円の書き方を解説します。

 

とりあえず、今回のやることのまとめ。

See the Pen rwQmNO by youya66 (@youya66) on CodePen.0

beginPath() … サブパスのリセット

beginPathでcontextのサブパスをリセットします。

 

それだけではわからないと思うので、
まずはパスについて説明します。
contextは描画準備(現在)のパスを1つのみ持ちます。
パスとは0個以上のサブパスで構成されたリストです。
最初は、contextのパスにはサブパスが一つもありません。

 

続いて、サブパス説明します。
一つ以上の直線もしくは曲線で結ばれた点と
サブパスが閉じているかどうかのフラグを持ちます。
サブパスが閉じている状態とは、最初の点と最後の点が繋がっており、
なにかしらの図形になっている状態のことを示します。

 

パスを一つしか持たないために、新しい図形を描画する際に、
beginPath()でサブパスの入ったリストをリセットしなければなりません。

stroke() … サブパスの輪郭を描く

stokeは輪郭表示に使用します。
例えば、context.strokeStyle = valueで輪郭の色を指定できます。

%nbsp;

また全てのサブパスに適応されます。

fill() … サブパスを塗りつぶす

fillは塗りつぶしに使用します。
例えば、context.fillStyle = valueで塗りつぶしの色を指定できます。
さらに、閉じていないサブパスも塗りつぶされます。

%nbsp;

また全てのサブパスに適応されます。

moveTo(x, y) … 開始点を指定する

サブパスの開始点を座標(x,y)に指定します。

lineTo(x, y) … 線を描く

直前の座標と指定した(x, y)座標を結ぶ直線を引きます。
サブパスがすでにあるなら、直前のサブパスにつながる直線になります。

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(15,15);
ctx.strokeStyle = "#FF0000";
ctx.stroke();

closePath(x, y) … 多角形を描く

最終座標と開始座標を結んでパスを閉じ、
何らかのとじた図形が作成されます。

ctx.beginPath();
ctx.moveTo(15,30);
ctx.lineTo(30,45);
ctx.lineTo(0,45);
ctx.closePath();
ctx.strokeStyle = "#00FF00";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(60,30);
ctx.lineTo(75,45);
ctx.lineTo(45,45);
ctx.closePath();
ctx.fillStyle = "#00FF00";
ctx.fill();

rect(x, y, w, h) … 四角を描く

直線を4回繰り返し、四角を描く方法もありますが、
こちらの方が簡単で、一般的です。

(x, y)は四角の左上の座標で
(w, h)は横幅と縦幅を指定します。

またclearRect(x, y, w, h)メソッドでは
指定された矩形を透明な黒にクリアします。

ctx.beginPath();
ctx.rect(0,60,30,30);
ctx.strokeStyle = "#0000FF";
ctx.stroke();

ctx.beginPath();
ctx.rect(45,60,30,30);
ctx.fillStyle = "#0000FF";
ctx.fill();

ctx.clearRect(15, 75, 45, 15);

arc(x, y, radius, startAngle, endAngle,  [, anticlockwise ]) … 円や円弧を描く

引数(x, y) は、円弧の中心点、
引数(radius)は、円弧の半径、
引数(startAngle, endAngle)は、x軸の正の領域から時計回りに計測します。
引数(anticlockwise)は、円弧の作成方向が、反時計周り(true)か、時計周り(false)
を指定しています。

またAngleの単位はラジアン(rad)になります。
ラジアンは角度を表す単位で、1rad = 180度になります。

// 角度を表す単位 度数 / 180 * π
ctx.beginPath();
ctx.arc(15, 125, 15, 45/180*Math.PI, 225/180*Math.PI, true);
ctx.strokeStyle = "rgb(0,0,0)";
ctx.stroke();

ctx.beginPath();
ctx.arc(75, 125, 15, 45/180*Math.PI, 225/180*Math.PI, false);
ctx.strokeStyle = "rgb(0,0,0)";
ctx.stroke();

また円は
(startAngle, endAngle) = (0, Math.PI*2)
で描画することができます。

ctx.beginPath();
ctx.arc(135, 125, 15, 0, Math.PI*2, true);
ctx.strokeStyle = "rgb(0,0,0)";
ctx.stroke();

 

以上です。

 

参考記事
Canvasリファレンス

 

スポンサーリンク

メールアドレスが公開されることはありません。

youya66

だらけとびびり、それとちょっぴりのてきとーさ。

コアラになってだらだらしながら愛されたい。