Blog

Canvasで波のアニメーションを描画する

img01

ESPALMADOR MARISQUERIA|エスパルマドール マリスケリア|仙台

↑こちらのサイトの波のアニメーションが面白いと思ったので、
自分でもできないかと思って、方法を調べてみました。

こちらのサイトでは、Canvasで波をアニメーションさせているようでしたので、
Canvasで波のアニメーションを描画する方法を調べて、
そちらを基に再現してみました。

↓作ってみたDEMO

DEMO1

DEMO2

波の描画方法は、
↓こちらのサイトを参考にさせていただきました。

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

 

方法

Canvasへの描画はlineTo()など、パスを使って行います。
波はSIN関数を使って描画します。

以下がコードです。

HTML

JavaScaript

複数の波を重ねて表示することなどもできますので、
応用次第でかなり表現の幅が広がるのではないかと思いました。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ