読者です 読者をやめる 読者になる 読者になる

canvasはデンタルフロスくんの涙を流すか

はじめに

さあ、さて。第一回目のラボは「canvas*1」です。
html5のタグとしてcanvasが加えられ、これによってがしがしビットマップ描画をすることができるようになりました。具体的には、htmlにてcanvas要素を記述し、描画はJavaScriptにて記述します。
たとえば、

<canvas id="canvasTag" width="200" height="200" style="border: 1px black solid"></canvas>
<script>
  var canvas  = document.getElementById("canvasTag")
  var ctx = canvas.getContext('2d');
  ctx.fillStyle='rgba(192,40,50, 0.4)'; //色指定RGB+A 
  ctx.beginPath();
  ctx.arc(80,80,60,0,Math.PI*2,true); //座標(80,80),半径(60)
  ctx.fill(); //描画実行
</script>

これだけの記述で、こんな感じ(デモ)で色付きの円を描くことができます。

f:id:haseharu:20120512161002p:plain

描画部分はJavaScript部分で記述することになりますので、たとえば、こんな感じ(デモ)のも簡単に描けます。

f:id:haseharu:20120512163043p:plain

デモ

このcanvasを触って動かして遊んでみました。せっかくなので、お気に入りの絵本をイメージして点というかきれいな円を描いたり動かしてみたい!、と。あるいは、いまから数年前にとある人物たち(自分も含む)によって企画され、いまも深い深い水面下で作り続けられている(はずの)「デンタルフロスくんの涙」という壮大すぎて未完の(違) 物語をイメージしたcanvasアニメーションを習作してみよう!、と。また、落ちてくる「涙」にカーソルをあててクリックして拾ってみてください。スッと何かがあらわれるかと思います*2

DEMO:Tears of Dental-floss

これは何?

f:id:haseharu:20120512153544p:plain

裏側の仕組み

  • jQuery AjaxをつかってTwitter APIからTweetを取得
  • 「当たり判定」はクリックした座標にある色をgetImageDataで取得して判定
  • Lightbox的なウィンドウはcssで(こちらを参考に

Floating interface

検索でもブラウジングでもない、クリックしないと中身がわからない、うかうかしていると流れていってしまうことから「偶然」を盛り込んだインターフェースになると面白いなあ、と思いながら作りました。あとは見ていて飽きないアニメーションにしたいなあ、と*3

おわりに

canvasでブラウザが「キャンバス」に変わります。たった数行のコードで絵を描くことができます。ただ、アニメーションにするとなると「絵の描画」->「キャンバスを一度クリア」->再度「描画」を繰り返し、動いているようにみせる処理を記述することになります。アニメーションをもう少し記述しやすいといいなあとは思いました*4
興味を持たれた方はこちらにデモサイトやまとめサイトがまとめてあるのでざっと眺めてみることをオススメします。

*1:キャンバス?カンバス?

*2:Dropbox上でhtmlとJavaScriptのみ、で動かしています。

*3:実現してるかどうかは「?」

*4:このあたりは各種ライブラリを使うといいのかもしれません。自分は使ったことがありませんが。