映える!
<canvas>
SaCSS vol.1072019.10.16 (Wed)
目次
-
<canvas> とは？
-
<canvas> の使い所
-
事例
-
まとめ
<canvas> とは?
-
JSで絵を描ける
-
2Dも3Dも描ける
-
画像を変形とかさせれる
-
文字も描ける
-
HTMLの要素
<canvas> の使い所
-
背景として
-
コンテンツそのものとして
-
画像切り替えとかの一部分として
-
昔Flashが担ってた部分を担える感じ
事例
どうやって作ってるのか説明できるように
自分が作った事例です…🙇
背景として
- PIXI.js
背景として
- three.js
- fragment shader
コンテンツとして
- three.js
- three.bas
- vertex shader
コンテンツとして
- three.js
- three.bas
- vertex shader
コンテンツとして
- Tensorflow.js
- fragment shader
まとめ
-
CSSやjQueryのanimateとかで表現出来ないような演出が出来る👍
-
WebGLとかに足を踏み入れると、Shaderとか書くことになるので（個人的に）結構難しい😇
-
今回紹介した事例以外でもcanvasの使い所はまだある👍
-
アニメーションの引き出しを増やす意味でもやってみるのが吉👍