映える!
<canvas>

SaCSS vol.107​2019.10.16 (Wed)

山田 典明 | @noliaki

https://noliaki.netlify.com/about

v-sapporo にもJOINしてね

目次

1. <canvas> とは？

2. <canvas> の使い所

3. 事例

4. まとめ

<canvas> とは?

• JSで絵を描ける

• 2Dも3Dも描ける

• 画像を変形とかさせれる

• 文字も描ける

• HTMLの要素

<canvas> の使い所

• 背景として

• コンテンツそのものとして

• 画像切り替えとかの一部分として

• 昔Flashが担ってた部分を担える感じ

事例

どうやって作ってるのか説明できるように

自分が作った事例です…🙇

背景として

https://noliaki.netlify.com/

• PIXI.js

背景として

https://noliaki.github.io/aurora-webgl/

• three.js
• fragment shader

コンテンツとして

https://elastic-perlman-58225d.netlify.com/

• three.js
• three.bas
• vertex shader

コンテンツとして

https://eloquent-beaver-e4ea68.netlify.com/

• three.js
• three.bas
• vertex shader

コンテンツとして

https://fake-fake-fake.netlify.com/

• Tensorflow.js
• fragment shader

まとめ

• CSSやjQueryのanimateとかで表現出来ないような演出が出来る👍

• WebGLとかに足を踏み入れると、Shaderとか書くことになるので（個人的に）結構難しい😇

• 今回紹介した事例以外でもcanvasの使い所はまだある👍

• アニメーションの引き出しを増やす意味でもやってみるのが吉👍

🙇‍♂️ありがとうございました🙇‍♂️