[HTML5] Canvasを使ってラインアートを表現してみた

HTML5のcanvasタグを利用して、ラインアートを表示するページを作成してみました。ページを開くと画面いっぱいのcanvasにラインアートが自動で表示されます。50行くらいのライトな実装でできています。

http://www.yoheim.net/labo/html5/canvas/LineArt.html

画面を開く時に、線のx座標やy座標の間隔をランダムに決めて、一定時間ごとに座標をずらして線を描画します。

canvasで線を描くときには、以下のようにJavascriptの実装を行いました。

var context = document.getElementById("myCanvas").getContext("2d");
context.strokeStyle = "rgba(150, 150, 150 ,0.5)"; // Red, Green, Blue, Alha
context.lineWidth = 2;
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.stroke();

canvasのコンテキストを取得して、線の色、太さを設定します。線を引くメソッドを呼び、開始地点／終了地点を指定し、線を描画します。objective-cで線を引くときと同じメソッドだなぁ。線を引くこの方法は、他の言語でも利用されてるのかな(・∀・)？

最後に、

canvasは線以外にも、四角や丸やグラデーションも描画するメソッドが用意されているようです。色々と触って実装してみると楽しいですね。

HTML5を学ぼうページをFacebook上に勢いで作成しましたw。もし良ければそちらもご覧頂けると幸いです。また私のTwitter（@yoheiMune）も宜しくお願いします。