Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 Canvasを学びたい人に送る Canvasの超基本とその後の学習方針

6,510 views

Published on

「HTML5 Canvasをいじってみたいけど、なんか難しそうだし手を出しづらいんだよなあ」という人を対象とした HTML5 Canvas の超基本として 四角形の描画を紹介します。 また、応用として複雑なアニメーションをつくっていく上での勘所の紹介と、勘所を学ぶ上で役に立つ教材の紹介も行います。

Published in: Technology
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/39mQKz3 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/39mQKz3 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML5 Canvasを学びたい人に送る Canvasの超基本とその後の学習方針

  1. 1. Twitter: @irration Blog: http://kinokoru.jp/
  2. 2. <html> <head> <script> window.onload = function(){ var cv = document.getElementById('cv'); var ctx = cv.getContext('2d'); ctx.fillStyle = '#F00'; ctx.fillRect(10,10,100,100); } </script> </head> <body> <canvas id="cv" width="500" height="300"></canvas> </body> </html>
  3. 3. 3. <body> ~ </body> の間に 以下のコードを書いて下さい。 <canvas id="cv" width="500" height="300"></canvas> これが描画を行うための「キャンバス」となります。 上の場合、横幅500、高さ300のキャンバスになります。
  4. 4. 4. <head> ~ </head> の間に 以下のコードを書いて下さい。 <script> </script> JavaScriptにより描画をするための部分となります。
  5. 5. 5. <script> ~ </script> の間に 以下のコードを書いて下さい。 window.onload = function(){ } 「ページが読み込まれたら { } 内の処理を実行」
  6. 6. 6. { } の間に 以下のコードを書いて下さい。 var cv = document.getElementById(‘cv’); HTML の canvas 要素をJavaScriptでいじるための指定です。 「どきゅめんと どっと げっと えれめんと ばい あいでぃー」 大文字・小文字・「l」と「I」のミスタイプに注意。
  7. 7. 7. 6で書いたコードの下に以下のコードを書きます。 var ctx = cv.getContext(‘2d’); Canvasでは この「コンテキスト」という存在を通じて 色の変更、描画などの処理を行います。 いわば コンテキストは「絵を描く人」のような存在です。 上のコードでは、「cv」というキャンバスに絵を描いてもらう ために 画家を用意するイメージです。
  8. 8. 8. 7で書いたコードの下に以下のコードを書きます。 ctx.fillStyle = ‘#F00’; 絵を描く人に対して、 「色を塗るときは#F00(赤色)でよろしくお願いします」 とお願いしています。
  9. 9. 9. 8で書いたコードの下に以下のコードを書きます。 ctx.fillRect(10, 10, 100, 100); 絵を描く人に対して 「キャンバスの左上から10pxの所から、 縦横100pxの範囲を四角に塗っちゃって下さい」 とお願いしているイメージです。
  10. 10. 描画前に雪インスタンスを生成し、 配列につっこんでおく。 ( 以下は 50 個の雪インスタンスを格納する例 ) var snows = []; for( var i = 0; i < 50; i++ ){ snows.push( new Snow() ); }
  11. 11. setInterval 関数で描画。 setInterval(function(){ : for( var i = 0; I < snows.length; i++ ) { snows[i].draw(); } : }, 30)
  12. 12. ここら辺の勘所が学べる 良い教材
  13. 13. CodePlayer http://thecodeplayer.com/ ↓ここら辺の教材を何回か写経すると 何となく勘所がつかめてくる http://thecodeplayer.com/walkthrough/make-aparticle-system-in-html5-canvas
  14. 14. CODEPREP http://codeprep.jp/ 「オブジェクト指向入門」 オブジェクト指向を学びつつ Canvasでパーティクルの勉強もできる。 http://codeprep.jp/ja/books/book/36
  15. 15. ありがとうございました

×