映える!
<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が担ってた部分を担える感じ

事例

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

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

背景として

  • PIXI.js

背景として

  • three.js
  • fragment shader

コンテンツとして

コンテンツとして

コンテンツとして

  • Tensorflow.js
  • fragment shader

まとめ

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

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

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

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

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

deck

By noliaki

deck

  • 133
Loading comments...

More from noliaki