Canvasの使い方


Canvasの基本

 <canvas>タグはHTML5で追加されたタグです。この要素を使うとブラウザ上で描画が簡単にできます。

 Canvasを使うには、要素の参照を取得して、それを元にコンテキスト(文脈)オブジェクトを取得します。コンテキストには、2Dと3Dがあります。コンテキストオブジェクトには、様々な描画メソッドが用意されていて、それらのメソッドを使い描画を行います。

<canvas id="canvas1" width="640px" height="480px"></canvas>
<script>
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillRect(100, 80, 300, 280);
</script>

 Canvasの座標軸は下の図ようになっています。数学の座標軸と違うので注意が必要です。

2Dコンテキストの描画

直線

 直線を引くには、moveTo(x, y), lineTo(x, y)メソッドを使います。

サンプル

矩形

 矩形を描くには、strokeRect(x, y, width, height)メソッドを使います。もし、中身を塗りつぶしたいなら、fillRect(x, y, width, height)を使います。rect(x, y, width, height)メソッドは、実行後ただちに描画しません。最後に、stroke()メソッドを実行する必要があります。

 clearRect(x, y, width, height)メソッドを使うと、描いた矩形を透明にします。

サンプル

 arc(x, y, radius, startAngle, endAngle, anticlockwise)メソッドは、基本的に円弧を描くメソッドですが、パラメータを変えることにより、円も描けます。

 arcメソッドは呼び出すだけでは、ただちに描画しません。必ず最後にstrokeメソッドまたはfillメソッドを呼び出す必要があります。

(参考) 楕円を描画するには「変形」を併用します。

サンプル


複雑な図形

 beginPath. closePathメソッドを使って途中のパスをlineToなどで描いていきます。lineToでなくquadraticCurveToやbezierCurveToも用意されています。

サンプル

テキスト

 テキストをCanvasに描画するには、fillText(text,x,y)メソッドを使用します。もし、中抜き文字で描画したいなら、strokeText(text,x,y)を使用します。フォントは、fontプロパティで変更できます。

サンプル

画像

 画像をCanvasに描画するには、drawImage(image,x,y)メソッドを使用します。

サンプル

 画像の画素(ピクセル)を直接操作することもできます。それには、createImageData, getImageData, putImageDataメソッドやdata, width, heightプロパティが使用できます。

サンプル

線のスタイル

 線のスタイルは、strokeStyleプロパティで設定します。このプロパティは、色、色の傾斜、パターンを設定できます。線の幅は、lineWidthプロパティで設定します。他にも線のスタイルを設定するプロパティとして、lineCap, lineJoin, miterLimitプロパティなどもあります。

サンプル

塗りつぶし

 図形を塗りつぶすときのスタイルは、fillStyle(color, gradient, pattern)メソッドで設定します。

 単純な色でなく、徐々に色を変化させて塗りつぶすときは、createLinearGradient(x0,y0,x1,y1)createRadialGradient(x0,y0,r0,x1,y1,r1)メソッドが利用できます。

 パターンを使って図形を塗りつぶしたい場合、createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")メソッドを利用できます。

サンプル

 図形に影を付けるには、shadowColor, shadowBlur, shadowOffsetX, shadowOffsetYなどのメソッドを利用できます。

サンプル

変形

 座標軸の変換を行うことにより、図形の移動、回転、変形などを行います。

サンプル

 

このページの先頭へ戻る