【Canvas2Dとは】初心者がまず見るべきサイト・書籍まとめ
公開日 : 最終更新日 :
- コーディング
「WebGL」が多くのサイトで使われるようになって来ていますが、それに合わせて「Canvas2D」という言葉も多く聞こえて来るようになってきています。
Canvas2Dとは何のことか分からない人から学び初めの人に向けて、見るべき有料サイトや書籍をまとめました！
ぜひ確認してみて下さい！
目次
【Canvas2Dとは】
canvasタグにおける「getContext(‘2d’)」って何？を説明します
Canvas2Dのことを優しく例題を使いながら説明してくれています。
まずはこちらのサイトから概要を掴むのが良いかと思います。
https://blog.framinal.life/entry/2020/03/29/084651
canvasのgetContext(“2d”)って何
非常に端的にCanvas2Dを説明してくれています。
さくっと読んでおきましょう。
https://qiita.com/manten120/items/86c087b937708697acec
Canvas 2Dリファレンス
ある程度内容を把握出来たら、リファレンスを読んで行きます。
リファレンスは読むのが難しいと思いますが、プログラムを勉強していくと必ずリファレンスを読まなければいけない時が出てきます。
全て理解する必要はありません。
今後の練習のつもりで読んでいきましょう
https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D
【Canvas2Dを動かす】
Canvas2Dについてさっくり復習してみた
JavaScript Advent Calendar 2020の記事です。
昨今色々なフレームワークやライブラリがありますが、素のCanavs2Dでいろいろ簡単なデモを作ってくれているのでとても参考になります。
https://qiita.com/ryokio0129/items/33f2d8cba1d4c09fb9d0
CSS3とHTML5 Canvasで作るモーショングラフィック
Web業界の人であれば知らない人はいないと思われるICS MEDIAの記事です。
毎回素晴らしい記事を書いてくれますが、こちらのCanvas2Dに関する記事も必読です。
https://ics.media/entry/10141/
Canvasで桜を降らせてみました
少し古めの記事ですが、こちらも非常に勉強になる記事です。
WebGLやCanvas2Dで必須となる数学の知識を活用して、画像回転や動きを実現しています。
https://www.otwo.jp/blog/canvas_sakura/
Canvasを使ってお絵描きと画像の保存をしてみる【HTML5】
Canvas2Dを使うメリットの１つとしてインタラクティブなサイトを作れるということがあります。
お絵描きを通してリアルタイムで処理するプログラムを勉強することが出来ます。
https://www.otwo.jp/blog/canvas-drawing/
【数学】
Coding Math
Canvas2Dを学んでいく上で必ず「数学」の知識が必要になってきます。
ただし深く知る必要はありません。プログラムで必要な数学の知識を教えてくれるYoutubeがありますので、そちらで勉強しましょう！
https://www.youtube.com/watch?v=zm9bqSSiIdo
【書籍】
[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門
ゲームを作りながらCanvas2Dを学んでいきます。
最低限のJavascriptの知識は必要ですが、Canvas2Dで出来ることをある程度把握することが出来ます！
またCanvas2Dで使用する数学の基礎知識も一緒に学ぶことも出来ます！
おすすめの書籍です！
最後に
Canvas2Dが使えるようになるまではいろいろな要素を勉強する必要があります。
ただCanvas2Dを理解出来れば、WebGLもスムーズに学ぶことができ、制作の幅が大きく広がります。
ぜひ頑張って学んで、次の段階へステップアップしていきましょう！
