Works
CSSのみで来海えりかちゃんがDance! Dance!
♪Dance! Dance! ハートキャッチ☆
kaleidoscope
1.canvasで三角形エリアに文字をランダム20個描画 1.1 canvasで三角形にclip切り抜く 1.2 文字のサイズと色をランダムに決定し描画 1.3 文字サイズ、色、x、yを保存しておく 2.canvas画像をDataURLで出力し24個のimg.srcに 3.24個imgの配置、角度をcssで調整 4.setIntervalで三角形を作り直す 4.1 最初と同じようにcanvasで描画 4.2 最初に描画したときの文字のx、y、色、サイズを用いる 4.3 その際 yだけ+1する 4.4 yが三角形clipエリア外（下）に出るなら新しい文字をclipエリアの外（上）に描画 ※常に20個分の文字の描画位置、色、サイズのデータを保持している 4.5 作り直したcanvasの三角形画像をDataURLで出力し24個のimg.srcに
さーくらー ひらーひらー
まいーおりーて おーちてえー cssアニメーションで桜ひらひら. webkit only.
あの日見たEDの雰囲気を僕達はまだ再現できない。
「あの花。」EDっぽく。 アニメ「あの花。」のエンディングの花が舞うのをCSSアニメで再現してみたかったのですが…。 サビ突入時のズームアウト+反転再現のためにsetTimeoutだらけです。 全画面にしてスクリーンセイバー的利用（向いてないとは思う）に落下と反転を繰り返す版もあります → http://jsdo.it/piyotori/edGr ※webkit only
2d canvas + 3d CSS
(webkit only, Full Screen推奨) disco?っぽい感じで cssで変形配置してさらにぐるぐる回してるcanvasに普通に2d描画してるだけっていう。
長方形の画像をディスク盤面にねじ曲げてプリント
長方形の元画像を、CD・レコード盤的なものの表面にねじ曲げてプリントするテスト ねじ曲げはcanvas利用 回転はCSSアニメーション BGM: カレンダーガール（アイカツ！）
fixed single arrow clock: 針固定で文字盤が回る時計
針が1本固定で、文字盤が回転する時計 1.canvasで文字盤, 針, を作成し4つのimgに出力 (コードのほとんどが文字盤, 針の描画です) 2.各objを毎秒css3 transformで角度調整 なのでcanvas上でのアニメーションではないです -------------------------------------------------- standard
canvasで自己組織化マップ
アルゴリズムは見よう見まねなんちゃってです modified: 16x16版切り替えボタンを設置しました さっさと同系色が集まる様子見てみたい場合は16x16でどうぞ