2012/01/12更新

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

このエントリーをはてなブックマークに追加            

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

f:id:yoheiM:20110403200436j:image

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)も宜しくお願いします。







こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。