SAKUSAKU

HTML5 canvas 試作 – その1 サインカーブ(波の表現)を描画してみました。【不定期連載】

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

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

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

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

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

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

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

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

参考:Canvas Sine Wave – JSFiddle

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

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

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


試作後記

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

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