今回の勉強会は凸包とcanvasについてです。
凸包について
凸包は与えられた集合を含む最小の凸集合です。平面上の点集合の凸包は輪ゴムをかけたて包み込んだ形になります。
凸包 wiki
幾何の問題で多数の点が与えられたときは、凸包を作成して、凸包を構成している点のみを対象とすることで、計算量を減らすことができるようになる問題があります。（最小包含円を求める問題など）
凸包を生成
手順：
点の数：
ログここから
凸包を利用して最小包含円を作成（2点を直径とする円）
ログここまで
excanvas.js
IE8以下ではcanvasに対応していませんが、Googleが提供しているexcanvas.jsを使用することで、IE8以下（IE6以上？）でもcanvasを使用することが可能です。
ただし、jqueryを使用している場合は読み込みの順番を考慮する（$(window).load()で処理を行う）必要があったり、対応していない機能（filltextなど）があったりするので、そのまま使えるようにはならないようです。
canvasに描画する方法
Contextを取得
1.<p>Contextを取得して、ここに設定をして描画していきます。</p>2.var ctx = document.getElementById("canvas").getContext("2d");各種設定
色や太さやフォントなどを設定できます。色はRGBの他に透明度（alpha）も指定できます。
1.ctx.fillStyle = '#0000FF'; //塗りつぶしの色2.ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)'; //線の色3.ctx.lineWidth = 1; //線の太さ4.ctx.font = "18px Arial"; //フォント四角を描画
fillRectで、左上のx座標, 左上のy座標, 幅, 高さを指定して、四角を描画します。
1.ctx.fillRect(x, y, w, h);円を描画
arcで、中心のx座標, 中心のy座標, 半径, 角度などを指定して、円を描画します。
1.ctx.beginPath(); //線を書き始める為の設定2.ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); //円弧を描く3.ctx.stroke(); //実際に線をcanvasに描画多角形を描画
lineToで、線を描き、closePathで線の現在の地点とスタート地点とをつなぐことで多角形を描画します。
01.ctx.beginPath(); //線を書き始める為の設定02.//t_lには各座標が入っている03.ctx.moveTo(t_l[0].x, t_l[0].y); //線のスタート地点04.for(i=1;i<t_l.length;i++){05. p = t_l[i];06. ctx.lineTo(p.x, p.y); //線を描いていく07.}08.ctx.closePath(); //現在の地点とスタート地点とをつなぎ、線を閉じる09.ctx.stroke(); //実際に多角形の線をcanvasに描画10.//ctx.fill(); //塗りつぶし多角形を描画テキストを描画
fillTextで、テキスト,左上の座標を指定してテキストを書き込めます。最大幅を設定するとその幅を超える場合にその幅に収まるように調整されます（縦長になります）。
1.ctx.fillText(text, x, y, maxWidth);クリアする
canvasは明示的にクリアしなければ、重ねて描画していくので、描画した線や図形を消すにはclearRectでクリアする必要があります。
1.//左上のx座標, 左上のy座標, 幅, 高さを指定してクリア2.ctx.clearRect(x, y, w, h);まとめ
canvasを使用すれば、幾何のアルゴリズムの説明が比較的簡単にできると思います。
以上です。堤田
