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

HTML5

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

http://html5learner.appspot.com/html/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）も宜しくお願いします。


関連エントリー