ブログデザイン備忘録～canvasによる図形描画・塗りつぶし

1.四角形の描画
2. 円の塗りつぶし
3. 任意の図形の塗りつぶし
4. まとめ

　今回はcanvasとjavascriptを用いて四角、円、直線で作成できる図形などの内部を塗りつぶす方法について紹介する。

atatat.hatenablog.com

1.四角形の描画

　まずcanvas要素とjavascript関数を用いて四角形を描画する方法について説明する。四角形を描画するにはstrokeRect()を用いて以下のようにする;。

<canvas width="300" height="150" id="canv_shp1" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_shp1');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.strokeRect(20,20,150,100);
}
</script>

関数strokeRect(x,y,w,h)は四角形の左上の座標(x,y)を指定し、左上の座標から幅w,高さhの四角形を描画する。また直線等で用いていた描画を指示するstroke()を入れる必要ががなく、strokeRect()のみで描画することができる。上の例では座標(20,20)から幅150,高さ100の四角形を描画する。

なお従来のstroke()を入れて描画するrect(x,y,w,h)も使用することができる。

<canvas width="300" height="150" id="canv_shp2" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_shp2');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.rect(20,20,150,100);
    context.stroke();
}
</script>

四角形を塗りつぶすには、四角形を塗りつぶして描画するfillRect(x,y,w,h)が用意されている。座標はstrokeRect()と同じ使い方で塗りつぶし色を指定するにはfillStyleにカラー(カラー名、RGB関数、カラーコードのいずれか）を指定すると指定された色で四角形が塗りつぶされる。

<canvas width="300" height="150" id="canv_shp3" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_shp3');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
   context.fillStyle="blue"
    context.fillRect(20,20,150,100);
}
</script>

2. 円の塗りつぶし

円を塗りつぶす場合、arc関数で円を描画してからfill()を用いることで円のパス内が塗りつぶされる。

<canvas width="300" height="150" id="canv_shp4" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_shp4');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(150,75,50,0,2*Math.PI);//円を描画
    context.closePath();
    context.fill();
    context.stroke(); 
}
</script>

3. 任意の図形の塗りつぶし

fill()を用いることで円に限らず直線などを用いて作成できる任意の図形を塗りつぶすことができる。例えば星形の図形を塗りつぶすには以下のよう直線で図形を作成した後にfill()を加えるだけでよい。

<canvas width="300" height="150" id="canv_shp5" style="background-color:yellow;"></canvas>

<script>
var canvas = document.getElementById('canv_shp5');
if (canvas.getContext) {
    var context = canvas.getContext('2d');

    context.fillStyle = "skyblue";
    context.lineWidth = 2;

    //一筆書きで星形のパスを描く
    context.beginPath();
    context.moveTo(90,60);
    context.lineTo(210,60);
    context.lineTo(110,130);
    context.lineTo(150,20);
    context.lineTo(190,130);
    context.closePath();

    context.fill();  // 塗りつぶし
    context.stroke();
  }
</script>