Canvas要素を用いた図形の描写

HTML5から加わったCanvas要素を用いればWebページ上での線や四角形、円といった図形の描写や画像の拡大表示となどができます。
CanvasはJavascriptで制御されます。

Canvas要素を用いて図形をWebページに描写するには
・HTML内にCanvas要素を用意する
・Javascriptで用意したCanvas要素を取得する
・取得したCanvas要素からコンテキストを取得する
・コンテキストに描きたい図形の色や影の色線の幅等などのプロパティを決める
・コンテキストに線や円といった図形を描く
という流れになります。

コンテキストとは絵画か設計図か、または平面図か立体図かといったどのようなものを描写するのかといった情報です。
現在のHTML5では"2d"という引数のみが指定できます。
そしてコンテキストに対して絵を描くときに用いる絵の具の色や筆の幅等が指定できます。


今回はCanvasを用いて線をWebページに表示しました。



HTML内の
<canvas id = "canvas" width = "600" height = "300" style ="background-color:#d3d3d3"></canvas>
でCanvas要素を用意します。
widthとheightでCanvasの大きさを指定します。またstyleでCanvasの色を指定できます。


Canvas内の描写はJavascriptのdraw関数で制御しています。


var canvas = document.getElementById("canvas");
でHTML内のCanvas要素を取得しています。


var ct = canvas.getContext("2d")
はコンテキスト2dを取得します。（先に述べたようにコンテキストは現在は2dのみです）


ここでは変数ctを基にコンテキストのプロパティを決めていきます。
今回はプロパティ
ct.strokeStyle
ct.lineWidth
ct.lineCap
を決めました。

strokeStyleは線の色
lineWidthは線の幅
lineCapは線の端の形状
となっています。
他にも決めることのできるプロパティはいくつかあります。


ここでは実際に描写を行います。
今回は線を描写しましたが、描き方は
ct.beginPath();
ct.moveTo(10,10);
ct.lineTo(150,250);
ct.stroke();
となっています。

beginPath();で描写を初期化します。
moveTo(10,10);は描写の始めの位置を指定しています。
lineTo(150,250);は描写の先の位置を指定しています。
stroke();で実際に描写を行います。