innov-staff-blog

今回の勉強会は凸包とcanvasについてです。

凸包について

凸包は与えられた集合を含む最小の凸集合です。平面上の点集合の凸包は輪ゴムをかけたて包み込んだ形になります。
凸包 wiki

幾何の問題で多数の点が与えられたときは、凸包を作成して、凸包を構成している点のみを対象とすることで、計算量を減らすことができるようになる問題があります。（最小包含円を求める問題など）

凸包を生成

手順：

点の数：

ログここから
ログここまで

excanvas.js

IE8以下ではcanvasに対応していませんが、Googleが提供しているexcanvas.jsを使用することで、IE8以下（IE6以上？）でもcanvasを使用することが可能です。
ただし、jqueryを使用している場合は読み込みの順番を考慮する（$(window).load()で処理を行う）必要があったり、対応していない機能（filltextなど）があったりするので、そのまま使えるようにはならないようです。

canvasに描画する方法

Contextを取得

Contextを取得して、ここに設定をして描画していきます。
var ctx = document.getElementById("canvas").getContext("2d");

各種設定

色や太さやフォントなどを設定できます。色はRGBの他に透明度（alpha）も指定できます。

ctx.fillStyle = '#0000FF'; //塗りつぶしの色
ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)'; //線の色
ctx.lineWidth = 1; //線の太さ
ctx.font = "18px Arial"; //フォント

四角を描画

fillRectで、左上のx座標, 左上のy座標, 幅, 高さを指定して、四角を描画します。

ctx.fillRect(x, y, w, h);

円を描画

arcで、中心のx座標, 中心のy座標, 半径, 角度などを指定して、円を描画します。

ctx.beginPath(); //線を書き始める為の設定
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); //円弧を描く
ctx.stroke(); //実際に線をcanvasに描画

多角形を描画

lineToで、線を描き、closePathで線の現在の地点とスタート地点とをつなぐことで多角形を描画します。

ctx.beginPath(); //線を書き始める為の設定
//t_lには各座標が入っている
ctx.moveTo(t_l[0].x, t_l[0].y); //線のスタート地点
for(i=1;i<t_l.length;i++){
    p = t_l[i];
    ctx.lineTo(p.x, p.y); //線を描いていく
}
ctx.closePath(); //現在の地点とスタート地点とをつなぎ、線を閉じる
ctx.stroke(); //実際に多角形の線をcanvasに描画
//ctx.fill(); //塗りつぶし多角形を描画

テキストを描画

fillTextで、テキスト,左上の座標を指定してテキストを書き込めます。最大幅を設定するとその幅を超える場合にその幅に収まるように調整されます（縦長になります）。

ctx.fillText(text, x, y, maxWidth);

クリアする

canvasは明示的にクリアしなければ、重ねて描画していくので、描画した線や図形を消すにはclearRectでクリアする必要があります。

//左上のx座標, 左上のy座標, 幅, 高さを指定してクリア
ctx.clearRect(x, y, w, h);

まとめ

canvasを使用すれば、幾何のアルゴリズムの説明が比較的簡単にできると思います。

以上です。堤田