サイト内検索

さまざまな図形を描く

Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。

矩形(長方形)

先ほどのコーナーでは、線を引くことで矩形を描きましたが、一発で矩形を描くメソッドがあります。

ctx.fillRect(x, y, width, height)
塗りつぶした矩形を描きます。x, yには矩形の左上端の座標を、widthに矩形の横幅を、heightに縦幅を引数として与えます。
ctx.strokeRect(x, y, width, height)
矩形を描きますが、枠線のみとなります。引数はfillRectメソッドと同じです。
ctx.clearRect(x, y, width, height)
矩形を削除します。削除された部分は透明になります。引数はfillRectメソッドと同じでです。

それぞれのメソッドの具体的な使い方を見てみましょう。サンプルのHTMLは次のようになっています。

<h2>fillRect()</h2>
<canvas id="c1" width="140" height="140"></canvas>
<h2>strokeRect()</h2>
<canvas id="c2" width="140" height="140"></canvas>
<h2>clearRect()</h2>
<canvas id="c3" width="140" height="140"></canvas>

3つのcanvas要素に対して、JavaScriptから前述のメソッドを適用します。

onload = function() {
draw1();
draw2();
draw3();
};
/* fillRect()の例 */
function draw1() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d'); ctx.beginPath();
ctx.fillRect(20, 20, 80, 40);
}
/* strokeRect()の例 */
function draw2() {
var canvas = document.getElementById('c2');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d'); ctx.beginPath();
ctx.strokeRect(20, 20, 80, 40);
}
/* clearRect()の例 */
function draw3() {
var canvas = document.getElementById('c3');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d'); ctx.beginPath();
ctx.fillRect(20, 20, 100, 100); ctx.beginPath();
ctx.clearRect(50, 70, 60, 30);
}

この結果は、下図のようになります。[実際のサンプルを見る]

fillRect()

fillRect()

fillRectメソッドを使うと、真っ黒な矩形が描画されます。

strokeRect()

strokeRect()

strokeRectメソッドを使うと、矩形の枠線だけが描画されます。

clearRect()

clearRect()

clearRectメソッドを理解していたくために、まずfillRectメソッドで塗りつぶした矩形を描きました。そして、clearRectメソッドつかって、その一部を切り抜きました。白い小さい矩形が、clearRectメソッドで切り抜かれた部分です。ExplorerCanvas 0002は、少なくともこの使い方においては期待通りの挙動を示しません。そのため、Internet Explorerではcanvas上のすべての図形がクリアされてしまいます。

これらのメソッドは、呼び出された時点で描画されます。そのため、fillメソッドやstrokeメソッドは必要ない点に注意してください。

円弧

円や円弧を描くためには、arcメソッドを使います。

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
円や円弧を描きます。引数は次の通りです。
x
円の中心のx座標
y
円の中心のy座標
radius
円の半径
startAngle
円弧を描き始める角度。x軸の向き(右方向)からみて右回りの角度をラジアンで指定。
endAngle
円弧を描き終える角度。x軸の向き(右方向)からみて右回りの角度ラジアンで指定。
anticlockwise
円弧を描く向きを真偽値で指定。trueを指定すると反時計回り(左回り)に、falseを指定すると時計回り(右回り)で円弧を描きます。

startAngleとendAngleで指定する角度の単位はラジアンですので、注意してください。360°であれば Math.PI * 2 となります。任意の度数をラジアンに変換する場合は、度数 * Math.PI / 180 となります。例えば、15°であれば、15 * Math.PI / 180 となります。

onload = function() {
draw1();
draw2();
draw3();
};
/* 円を描く */
function draw1() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d'); ctx.beginPath();
ctx.arc(70, 70, 60, 0, Math.PI*2, false);
ctx.stroke();
}
/* 円弧を描く */
function draw2() {
var canvas = document.getElementById('c2');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d'); ctx.beginPath();
ctx.arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
ctx.stroke();
}
/* 円弧を塗りつぶす */
function draw3() {
var canvas = document.getElementById('c3');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d'); ctx.beginPath();
ctx.arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
ctx.fill();
}

この結果は、下図のようになります。[実際のサンプルを見る]

円を描く

fillRect()

arc(70, 70, 60, 0, Math.PI*2, false) は、座標 (70, 70) が中心で半径60ピクセルの円を基準に、0°の位置から時計回りに360°回転して描かれた円弧を表します。円を描く場合は、引数anticlockwisetruefalseどちらを指定しても同じ図形となります。

円弧を描く

strokeRect()

arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true) は、座標 (70, 70) が中心で半径60ピクセルの円を基準に、10°の位置から反時計回り(左回り)に80°の位置までの円弧を表します。10°や80°といった角度は、あくまでもx座標(右向き)を0°として右回りに数えた角度です。たとえ引数anticlockwisetrue(反時計回り)を指定したとしても、位置を表す角度は反時計回りで数えるわけではありませんので、注意してください。

円弧を塗りつぶす

clearRect()

先ほどの円弧をfillメソッドで塗りつぶし描画すると、円弧が開いた部分を直線で結んだ図形となります。扇型になるわけではありませんので、注意してください。

arcメソッドは、呼び出されただけでは描画されません。必ず最後にstrokeメソッドまたはfillメソッドを呼び出してください。

これまで、直接や図形を描いてきましたが、すべて白黒でした。次のコーナーでは、描く図形に色を指定する方法を紹介します。>>色を指定する