JavaScriptとHTML5 Canvas 2Dを使ってベン図を描く
HTML5 Canvas 2Dを使ってベン図(ヴェン図)をHTML文書上に描くための方法に関する覚え書き。次のような、ちょっとしたJavaScriptアプリを作る手順を示す。 ベン図のJavaScriptアプリ このブラウザはHTML5 Canvasに対応していません。 和集合 共通部分 差集合 補集合 対称差 全体集合 HTML5 Canvas 2Dを使うための準備 HTML5 CanvasをHTML文書に埋め込むにはcanvas要素を使う。 <canvas id='canvas_name' width='250' height='180'> あなたのブラウザはCanvas要素に対応していません。 </canvas> canvasタグにidと幅(width)と高さ(height)という三つの属性を指定し、canvasに対応していないウェブ・ブラウザ向けのメッセージ(例えばCanvas not supported)をその間に入れてcanvas要素の終了タグではさむ。 canvasタグに挟まれた間の文字列は、Canvasに対応しているウェブ・ブラウザでは表示されない。ちなみに、JavaScriptを無効にしてあるとCanvasも無効になる。 idはウェブ・ページに表示するいくつかのcanvas要素を識別するためのもの。同じウェブ・ページにいくつかのcanvasを埋め込むためにはこのidがそれぞれに異なっている必要がある。 幅と高さはCanvasの四角形の枠の大きさを表わす。この幅と高さの枠の中に図が描かれる。この枠をはみ出すと表示されない。大きくしすぎると余白ができてしまうし、小さくしすぎると図がはみ出して見えなくなってしまう。幅と高さ以外の細かい設定は、canvas要素かid属性またはclass属性をセレクタに指定してスタイルシートを使って行うことができる。 次のスタイルシートの記述は、canvasセレクタでCanvasの外枠の線の太さを1pxに、線の種類を一本の実線に、その色を青に設定し、canvas_nameセレクタで背景色を白に設定している。 canvas { border:1px solid 'blue'; } #canv