皆さんは canvas ご存知ですか？

HTML5 になって追加された「リアルタイムに書き換え可能な画像」みたいなやつです。

※ 詳しいことはいろんなところに書いてあるので割愛します。
※ Canvas – HTML5.JP

ようやく IE8 シェアが少なくなってきてブラウザのスペック的には使えるようになってきた canvas 。
やろうと思えば何でも描画できるのでとても強力な要素なのですが、
これが Javascript をふんだんに使わないと使い物にならない（単純な図形を描画するだけならほんの数行〜10数行で実現できますが）ため、予算のある案件でないとなかなか実装できないのが難点です。

とはいえ最近ではライブラリも充実したりと、じわじわと一般にも canvas を使ったものがでてきている感があるので、
そろそろ SAKUSAKU としても「ちゃんと使えるようになっておかねばなるまい」ということで実戦で使えるタイプの canvas 演出を試作していこうとおもいます。
商品サンプルも兼ねて、出来上がったものは公開していきます。

ちなみにしばらくは canvas 操作の基本をしっかり理解するためにライブラリなどは極力使わない方針です。

canvas 試作 – その1　サインカーブ

さて、第1回目の今回はサインカーブをつくってみました。
サインカーブってあれです、三角関数です。
わかりやすく言うと波の形です。

参考：Canvas Sine Wave – JSFiddle

動いてない波なんかでは普通に画像作った方が早いので、アニメーションさせてます。
やはり canvas はアニメーションさせて真骨頂ですね。

海系のモチーフにはもちろん、見た目にもゆったりしていてリラックス効果を狙った使い方もできるかもしれません。
使ってみたいという方は お問い合わせ ください。

ソースコードも公開していきたいと思ってますが、綺麗に整形してから後日アップデートしたいと思います。

---

試作後記

ある程度の事前知識はあったので、今回の試作ではそれほど苦労はしていないのですが、
やはり実戦を想定すると色々課題も見えてきました。

• 複数の異なる属性を持つ要素を扱えるように要素のクラス、インスタンス化
• それらの要素を包括的に管理する仕組み（パフォーマンス維持のためのメインループ機能や要素の追加削除など）
• 要素に対しての効率的なスタイリング

ここらを考えるとライブラリを使いたくなってくるのですが、
まだぐっとこらえて1歩ずつ試作していこうと思います。