作成2012年11月22日
ブラザー上に図形を描く（HTML5）
HTML5の登場で、Flashなどのプラグインなしに、canvas要素でビットマップ画像が描画できるように、またsvg要素で2次元ベクター画像が描画できるようになった。
ここでは、インタラクティブな図形描画について、canvas要素による描画、svg要素による描画、HTMLだけでの描画の比較を行った。いずれの方法でも、ほとんど同じ結果が得られた（IE9+とGoogleChromeで確認し、FireFoxはNGであった）。
見て欲しいサイト：
SVG と Canvas でどちらを選ぶか (Windows)
canvas要素（HTML5）で描く
canvas要素上に図形を描く基本は次の通りである。canvas要素の原点は、画面左上にあり、右下の方に座標が広がっている。図形を描く最初はbeginPathメソッドに始まり、movetoメソッドで始点を移動し、linetoメソッドで直線を、arcメソッドなどで円弧などの曲線を描く、closePathメソッドで描いたパスを閉じ、strokeメソッドでパスに沿って輪郭の表示またはfillメソッドでパス内の塗りつぶし表示を行い、指定した図形の描画ができあがる。fillメソッドが自動的にパスを閉じるためclosePathメソッドを指定する必要はない。図形の描画として、rectメソッドで矩形、bezierCurveToメソッドでベジェ曲線、quadraticCurveToメソッドで二次曲線などの曲線を描くことができる。
一方、canvas要素では、clearRectで矩形範囲の図形の消去することができるが、個々の図形オブジェクト毎に削除する機能は標準搭載されてない。
コードサンプル（canvas 三角形の描画）
function draw(){
var canvas=document.getElementById("test-canvas");//canvas要素の取得
var context=canvas.getContext("2d");//canvasに描画するためのAPIにアクセスできるオブジェクト
context.beginPath(); //描画の開始
context.moveTo(60,10); //開始位置の移動
context.lineTo(10,70); //開始位置からこの座標までのパス描画
context.lineTo(110,70); //パス描画
context.closePath(); //パスを閉じる これがないと三角形にならない
context.stroke(); //線画の表示
}
<canvas id="test-canvas"
width="500" height="400"></canvas>
svg要素（HTML5）で描く
SVG
（
Scalable Vector Graphics
）
は
2次元グラフィックスとして、W3Cが2001年、勧告した規格で、現在HTML5にもこのSVGが組み込まれている。HTML5のsvg要素には、rect、circle、ellipse、line、polygon、pathなどの図形描画をはじめ、テキスト表示、アニメーションなど多彩な表示表現ができる。
コードサンプル（svg 三角形の描画）
var context=document.getElementById("test-canvas"); //svg要素の取得
function draw(){
drawLine(60,10,10,70); //lineの描画
drawLine(10,70,110,70); //lineの描画
drawLine(110,70,60,10); //lineの描画
}
function drawLine(x1,y1,x2,y2){
var
lin=document.createElementNS("http://www.w3.org/2000/svg","line");//line要素の生成
lin.setAttribute("x1",x1); //開始座標の設定
lin.setAttribute("y1",y1); //開始座標の設定
lin.setAttribute("x2",x2); //終了座標の設定
lin.setAttribute("y2",y2); //終了座標の設定
lin.setAttribute("style", "stroke:"+strkColor+";stroke-width:"+strkSize+"px");//スタイル設定
lin.setAttribute("id","stroke"+this.stroke_num); //id属性の設定
context.appendChild(lin); //svg要素にline要素を加える
}
<svg
id="test-canvas" width="500"
height="400"></canvas>
HTMLで描く
通常のHTMLには描画する要素やメソッドが用意されていない。そこで、次に示すようにspan要素を使って、ドットを描く。次の例では、座標（100,100）に3pxの青い四角を描くことができる。
<span style="left:100px; top:100px;
width:3px; height:3px; background-color:blue"></span>
このドット描画を利用し、線、円、楕円の描画については、ネットから入手したアルゴリズムに従い、それぞれの線描画を実現した。
ドットを描くサンプルコード
function drawDot(x,y){
var dot=document.createElement("span");
dot.style.left=x+"px";
dot.style.top=y+"px";
dot.style.backgroundColor=strkColor;
dot.style.width=strkSize;
dot.style.height=strkSize;
dot.setAttribute("id","stroke"+this.stroke_num);
this.canvas.appendChild(dot);
}
<div id="tomoe-canvas"></div>
作成 大坂哲司