Your SlideShare is downloading. ×
  • Like
メディア芸術基礎 II Canvas + Javascriptで図形を描く
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

メディア芸術基礎 II Canvas + Javascriptで図形を描く

  • 1,688 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,688
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
11
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. メディア芸術基礎 II Canvas + Javascriptで図形を描く 2013年10月28日、 11月11日 多摩美術大学 情報デザイン学科メディア芸術コース 担当:田所淳
  • 2. 今日の内容 ‣ 前回のjQueryから、さらに一歩進んで、HTML5の世界へ ! ‣ HTML5のcanvas要素をつかってみる ‣ canvas要素:プラグインを使用せずに、ブラウザに直接、図 形やアニメーションを描くことができる ! ‣ canvasの準備 ‣ 簡単な図形を描く ‣ 色の設定 ‣ くりかえしを使って、たくさんの図形を描画する
  • 3. サンプルファイルのダウンロード ‣ 紹介したサンプルファイルは、全て以下からダウンロードして ください ‣http://goo.gl/3cqyL
  • 4. Canvasとは?
  • 5. 図形やアニメーションを描くには? ‣ これまでの方法 ‣ 静止した図形を表示:GIFやJpeg、PNGなどの画像を外部ファ イルを読み込んでimg要素で表示 Webブラウザ img要素 外部ファイル GIF・Jpeg PNG など
  • 6. 図形やアニメーションを描くには? ‣ アニメーションや変化する図形を描くには? ‣ Flash Playerや、Java Appletなど外部プラグインを利用 Webブラウザ プラグイン 外部プログラム Flashなど
  • 7. 図形やアニメーションを描くには? ‣ HTML5からは、プラグインを用いずに直接ブラウザに図形や アニメーションを表示できるようになった ‣ canvas要素にJavaScriptで描画する Webブラウザ ! ! JavaScriptで ! 直接描画 canvas要素
  • 8. Canvasとは ‣ anvas要素はスクリプト(一般的に JavaScript)を使って図形を 描くために使われる新しいHTML要素 ‣ 元々はMac OS X v10.4の内部でWebKitコンポーネントとして Appleが開発 ‣ HTML5で、新しい標準規格として標準化
  • 9. Canvasとは ‣ ブラウザの対応状況 ‣ Internet Explorer 9、Mozilla Firefox、Google Chrome、 Safari、Operaなど全ての主要ブラウザの最新版で実装済み ! ‣ IEの8以前のバージョンは未対応だが、サポートするための外 部ライブラリが開発されている ‣ ExplorerCanvas
  • 10. canvas要素の書式 ‣ canvas要素の書式自身は、img要素とよく似ている ! ‣ 例:幅400pix、高さ300pixのcanvas要素を追加する ! <canvas ! ! id="example" width="400" height="300"></canvas> ‣ canvas要素のid属性: ‣ Javascriptなどのスクリプトで、どのcanvas要素に対して処理 を行うのかを特定する際に必要 ‣ anvas要素を使用する際には常にid属性を付けてユニークな(一 意な)名称を指定する ‣ このサンプルの場合は「example」
  • 11. canvasの準備 ‒ 基本テンプレート
  • 12. canvas要素の書式 ‣ まず、ベースとなるHTMLを用意する (index.html) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" charset="utf-8" /> <title>Canvas Example</title> <script src="canvasexample.js"></script> <style type="text/css"> canvas { border: 1px solid #999; } </style> </head> <body> <canvas id="example" width="400" height="300"></canvas> </body> </html>
  • 13. canvas要素の書式 ‣ まず、ベースとなるHTMLを用意する (index.html) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" charset="utf-8" /> <title>Canvas Example</title> <script src="canvasexample.js"></script> <style type="text/css"> 描画の命令を記述した canvas { border: 1px solid #999; } JavaScript </style> </head> <body> <canvas id="example" width="400" height="300"></canvas> </body> </html>
  • 14. canvas要素の書式 ‣ まず、ベースとなるHTMLを用意する (index.html) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" charset="utf-8" /> <title>Canvas Example</title> <script src="canvasexample.js"></script> <style type="text/css"> canvas { border: 1px solid #999; } </style> CSSでCanvas要素の </head> 周囲に枠線を描画 <body> <canvas id="example" width="400" height="300"></canvas> </body> </html>
  • 15. canvas要素の書式 ‣ まず、ベースとなるHTMLを用意する (index.html) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" charset="utf-8" /> <title>Canvas Example</title> <script src="canvasexample.js"></script> <style type="text/css"> canvas { border: 1px solid #999; } </style> </head> <body> <canvas id="example" width="400" height="300"></canvas> </body> ※表示のためのCanvas要素 </html>
  • 16. canvas要素の書式 ‣ Canvasに図形を描画するためのJavascirptテンプレート onload = function() { draw(); }; ! function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); };
  • 17. canvas要素の書式 ‣ Canvasに図形を描画するためのJavascirptテンプレート onload = function() { draw(); ページの読込が完了したら、draw()を実行 }; ! function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); };
  • 18. canvas要素の書式 ‣ Canvasに図形を描画するためのJavascirptテンプレート onload = function() { draw(); }; ! function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext)からcanvas要素を抽出し、 id名( example ) { return false; 変数 canvas に格納 } var ctx = canvas.getContext('2d'); };
  • 19. canvas要素の書式 ‣ Canvasに図形を描画するためのJavascirptテンプレート onload = function() { draw(); }; ! function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { canvasに対応していない return false; ブラウザのための処理 } var ctx = canvas.getContext('2d'); };
  • 20. canvas要素の書式 ‣ Canvasに図形を描画するためのJavascirptテンプレート onload = function() { draw(); }; ! function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); }; 2D図形描画のためのコンテキストを抽出し、 変数 ctx に格納
  • 21. canvas要素の書式 ‣ 実行結果:描画のためのcanvas領域が確保される
  • 22. 基本図形を描画する 1 - 矩形
  • 23. 基本図形を描画する 1 - 矩形 ‣ 生成したcanvas要素の内部に、Javascriptを記述して簡単な図 形を描画してみる ! ‣ まずは、矩形(長方形)から ! ‣ canvasでは矩形を描くための3つの関数が用意されている ! ‣ fillRect(x,y,width,height) : 塗られた矩形を描く ‣ strokeRect(x,y,width,height) : 矩形の輪郭を描く ‣ clearRect(x,y,width,height) : 指定された領域を消去 ! ‣ 実際にやってみよう!!
  • 24. 基本図形を描画する 1 - 矩形 ‣ canvasexample.js に命令を追加 onload = function() { draw(); }; ! function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.fillRect(50,50,540,400); ctx.clearRect(80,80,400,300); ctx.strokeRect(240,20,200,300); };
  • 25. 基本図形を描画する 1 - 矩形 ‣ canvasexample.js に命令を追加 onload = function() { draw(); }; ! function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.fillRect(50,50,540,400); ※追加した部分 ctx.clearRect(80,80,400,300); ctx.strokeRect(240,20,200,300); };
  • 26. 基本図形を描画する 1 - 矩形 ‣ 実行結果:3種類の矩形を表示
  • 27. 基本図形を描画する 2 - パス(直線)を描く
  • 28. 基本図形を描画する 2 - パス(直線)を描く ‣ canvasでは、一つのまとまった図形を描けるのは矩形だけ ‣ 他の図形を描くには、複数のパス(線)を組み合わせて作る ! ‣ パスを使用して図形を描くための命令 ‣ beginPath() ‒ パスの開始 ‣ closePath() ‒ パスを閉じる ‣ stroke() ‒ 線でパスを描く ‣ fill() ‒ 塗り潰しでパスを描く ‣ moveTo(x, y) ‒ パスの始点を移動する ! ‣ やってみよう!!
  • 29. 基本図形を描画する 2 - パス(直線)を描く ‣ canvasexample.js の draw()関数に追加 function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(500,400); ctx.lineTo(200,380); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50,400); ctx.lineTo(300,20); ctx.lineTo(520,50); ctx.closePath(); ctx.fill(); };
  • 30. 基本図形を描画する 2 - パス(直線)を描く ‣ canvasexample.js の draw()関数に追加 function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(500,400); ctx.lineTo(200,380); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50,400); ctx.lineTo(300,20); ctx.lineTo(520,50); ctx.closePath(); ctx.fill(); }; ※輪郭線による描画
  • 31. 基本図形を描画する 2 - パス(直線)を描く ‣ canvasexample.js の draw()関数に追加 function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(500,400); ctx.lineTo(200,380); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50,400); ctx.lineTo(300,20); ctx.lineTo(520,50); ctx.closePath(); ctx.fill(); }; ※塗りつぶしによる描画
  • 32. 基本図形を描画する 2 - パス(直線)を描く ‣ 実行結果:直線の組み合わせによる図形
  • 33. 基本図形を描画する 3 - 円弧や円を描く
  • 34. 基本図形を描画する 3 - 円弧や円を描く ‣ 円弧や円を描くために arc メソッドを使う ! ‣ 基本的な書式は以下の通り ! arc(x, ! ! y, radius, startAngle, endAngle, anticlockwise); ‣ x, y:円の中心座標 ‣ radius:半径 ‣ startAngle, endAngle:円弧の始まりと終点をラジアン角で定 義 (ラジアン:0∼2πで一周する角度の単位) ‣ anticlockwise:円弧を描く回転方向を指定
  • 35. 基本図形を描画する 3 - 円弧や円を描く ‣ canvasexample.js の draw()関数に追加 function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(320,240,200,0,Math.PI*2,false); ctx.stroke(); ctx.beginPath(); ctx.arc(320,240,160,0,Math.PI*1.5,false); ctx.stroke(); ctx.beginPath(); ctx.arc(320,240,120,Math.PI*0.25,Math.PI*1.0,true); ctx.stroke(); ctx.beginPath(); ctx.arc(320,240,40,0,Math.PI*2.0,true); ctx.fill(); };
  • 36. 基本図形を描画する 3 - 円弧や円を描く ‣ canvasexample.js の draw()関数に追加 function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(320,240,200,0,Math.PI*2,false); ctx.stroke(); ※円弧1 ctx.beginPath(); ctx.arc(320,240,160,0,Math.PI*1.5,false); ctx.stroke(); ctx.beginPath(); ctx.arc(320,240,120,Math.PI*0.25,Math.PI*1.0,true); ctx.stroke(); ctx.beginPath(); ctx.arc(320,240,40,0,Math.PI*2.0,true); ctx.fill(); };
  • 37. 基本図形を描画する 3 - 円弧や円を描く ‣ canvasexample.js の draw()関数に追加 function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(320,240,200,0,Math.PI*2,false); ctx.stroke(); ctx.beginPath(); ctx.arc(320,240,160,0,Math.PI*1.5,false); ctx.stroke(); ※円弧2 ctx.beginPath(); ctx.arc(320,240,120,Math.PI*0.25,Math.PI*1.0,true); ctx.stroke(); ctx.beginPath(); ctx.arc(320,240,40,0,Math.PI*2.0,true); ctx.fill(); };
  • 38. 基本図形を描画する 3 - 円弧や円を描く ‣ canvasexample.js の draw()関数に追加 function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(320,240,200,0,Math.PI*2,false); ctx.stroke(); ctx.beginPath(); ctx.arc(320,240,160,0,Math.PI*1.5,false); ctx.stroke(); ctx.beginPath(); ctx.arc(320,240,120,Math.PI*0.25,Math.PI*1.0,true); ctx.stroke(); ※円弧3 ctx.beginPath(); ctx.arc(320,240,40,0,Math.PI*2.0,true); ctx.fill(); };
  • 39. 基本図形を描画する 3 - 円弧や円を描く ‣ canvasexample.js の draw()関数に追加 function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(320,240,200,0,Math.PI*2,false); ctx.stroke(); ctx.beginPath(); ctx.arc(320,240,160,0,Math.PI*1.5,false); ctx.stroke(); ctx.beginPath(); ctx.arc(320,240,120,Math.PI*0.25,Math.PI*1.0,true); ctx.stroke(); ctx.beginPath(); ctx.arc(320,240,40,0,Math.PI*2.0,true); ctx.fill(); }; ※円弧4
  • 40. 基本図形を描画する 3 - 円弧や円を描く ‣ 実行結果:円弧と円の組み合わせによる描画
  • 41. 基本図形を描画する 4 - 色の設定
  • 42. 基本図形を描画する 4 - 色の設定 ‣ 色を図形に適用するためのプロパティは以下の3つ ‣ fillStyle ‒ 塗りの色 ‣ strokeStyle ‒ 線の色 ‣ globalAlpha ‒ 透明度 ! ‣ 色は、CSSなどで使用する16進数によるRGB値で指定する
  • 43. 基本図形を描画する 4 - 色の設定 ‣ canvasexample.js の draw()関数に追加 function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.globalAlpha = 0.5; ctx.beginPath(); ctx.fillStyle = '#3399FF'; ctx.arc(260,240,160,0,Math.PI*2.0,true); ctx.fill(); ctx.beginPath(); ctx.fillStyle = '#FF9933'; ctx.arc(400,240,160,0,Math.PI*2.0,true); ctx.fill(); };
  • 44. 基本図形を描画する 4 - 色の設定 ‣ canvasexample.js の draw()関数に追加 function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.globalAlpha = 0.5; ※全体の透明度の設定 ctx.beginPath(); ctx.fillStyle = '#3399FF'; ctx.arc(260,240,160,0,Math.PI*2.0,true); ctx.fill(); ctx.beginPath(); ctx.fillStyle = '#FF9933'; ctx.arc(400,240,160,0,Math.PI*2.0,true); ctx.fill(); };
  • 45. 基本図形を描画する 4 - 色の設定 ‣ canvasexample.js の draw()関数に追加 function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.globalAlpha = 0.5; ctx.beginPath(); ※円1 ctx.fillStyle = '#3399FF'; ctx.arc(260,240,160,0,Math.PI*2.0,true); ctx.fill(); ctx.beginPath(); ctx.fillStyle = '#FF9933'; ctx.arc(400,240,160,0,Math.PI*2.0,true); ctx.fill(); };
  • 46. 基本図形を描画する 4 - 色の設定 ‣ canvasexample.js の draw()関数に追加 function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.globalAlpha = 0.5; ctx.beginPath(); ctx.fillStyle = '#3399FF'; ctx.arc(260,240,160,0,Math.PI*2.0,true); ctx.fill(); ※円2 ctx.beginPath(); ctx.fillStyle = '#FF9933'; ctx.arc(400,240,160,0,Math.PI*2.0,true); ctx.fill(); };
  • 47. 基本図形を描画する 4 - 色の設定 ‣ 実行結果:2色の半透明の円
  • 48. まとめ ‣ ‣ ‣ ‣ Canvasについて canvas要素の書式 描画のためのJavascriptのテンプレート 基本図形の描画 ‣ 矩形 ‣ 直線 ‣ 円弧 ‣ 色
  • 49. jsdo.itをつかってCanvasアニメーション
  • 50. jsdo.it とは何か? ‣ jsdo.it (http://jsdo.it/)
  • 51. jsdo.it とは何か? ‣ ‣ ‣ ‣ ‣ 面白法人カヤックが運営する、コードコミュニティ 登録は無料 HTML5、JavaScript、CSSなどのオンラインエディター コードをオンラインに保存、公開 投稿されたコードをもとに、自分なりのアレンジを加えて新し い作品をつくる → Fork
  • 52. jsdo.it にユーザ登録
  • 53. jsdo.it にユーザ登録 ‣ まずは、ユーザ登録しましょう ‣ 登録は無料 ‣ Google、Facebook、Twitter、Yahoo、Linkedin、Github、 OpenID どれかのアカウントでログイン可能
  • 54. jsdo.it にユーザ登録 ‣ ユーザ設定画面で、ユーザ名や使用言語、アイコンなど各種設 定をしておく ‣ http://jsdo.it/account
  • 55. プログラムエディタの起動
  • 56. プログラムエディタの起動 ‣ ヘッダーにある「+ Start Coding」ボタンをおす ‣ プログラムを開発のためのコードエディタが起動
  • 57. プログラムエディタの起動 ‣ ヘッダーにある「+ Start Coding」ボタンをおす ‣ プログラムを開発のためのコードエディタが起動 コードエディター ここにプログラムを入力
  • 58. プログラムエディタの起動 ‣ ヘッダーにある「+ Start Coding」ボタンをおす ‣ プログラムを開発のためのコードエディタが起動 プログラムの プレビュー画面
  • 59. プログラムエディタの起動 ‣ ヘッダーにある「+ Start Coding」ボタンをおす ‣ プログラムを開発のためのコードエディタが起動 コンソール エラー出力など
  • 60. 最初の一歩:Hello World
  • 61. 最初の一歩:Hello World ‣ まずは、はじめの一歩で、画面上に「Hello World」という文 字列を表示するプログラムを作成してみましょう
  • 62. 最初の一歩:Hello World ‣ コードエディタのJavaScriptのタブを選択し、コードを入力 var canvas = document.getElementById('hello'); var ctx = canvas.getContext('2d'); ! ctx.font = "40px sans-serif"; ctx.fillText("Hello World!!", 20, canvas.height / 2);
  • 63. 最初の一歩:Hello World ‣ HTMLタブ <canvas id="hello" width="465" height="465"></canvas>
  • 64. 最初の一歩:Hello World ‣ CSSタブ body { background-color: #ffffff; margin:0; padding:0; }
  • 65. 最初の一歩:Hello World ‣ Save ボタンを押して、 Finish Editing を押す ‣ コードのプレビューをすると、画面に Hello World の文字が 表示される(はず)
  • 66. Canvasアニメーション
  • 67. Canvasアニメーション ‣ 先週の内容を復習しながら、簡単なアニメーションを実装 ‣ 今回は座標ではなく、円の半径をアニメーションさせてみる ‣ sin関数を使用して、なめらかな動きをつくってみる
  • 68. Canvasアニメーション ‣ JavaScript //グローバル変数 var canvas = document.getElementById('hello'); //キャンバス var ctx = canvas.getContext('2d'); //コンテキスト var frame; //フレーム番号 var radius; //円の半径 ! onload = function() { setup(); }; ! //初期設定 function setup(){ frame = 0; //アニメーションのインターバル設定 setInterval(draw, 1000/60); }
  • 69. Canvasアニメーション ‣ JavaScript //くりかえし描画 function draw(){ //画面の消去 ctx.clearRect(0, 0, canvas.width, canvas.height); //円の半径を、sin関数でアニメーション radius = 100 + 100 * Math.sin(frame * 0.1); //円を描画 ctx.fillStyle = '#3399ff'; ctx.beginPath(); ctx.arc(canvas.width/2, canvas.height/2, radius, 0, Math.PI*2, true); ctx.fill(); frame++; }
  • 70. Canvasアニメーション ‣ 実行結果:伸び縮みする円のアニメーション
  • 71. Fork - 共有されているコードをアレンジ
  • 72. Fork - 共有されているコードをアレンジ ‣ jsdo.it の「Fork」という仕組み ‣ jsdo.itにアップロードされて共有されているプログラムをアレ ンジして、自分のコードとしてアップできる仕組み ‣ アレンジ元になったコードの履歴が保存される ‣ 何代にもわたってコードをForkしていくことも可能 ! ‣ オープンソースコミュニティーのバージョン管理システムの仕 組みを踏襲している (Git、SVN など) ‣ Fork = あるソフトウェアパッケージのソースコードから分岐し て、別の独立したソフトウェアを開発すること
  • 73. Fork - 共有されているコードをアレンジ ‣ 花火のテンプレートをFrokしてみる ‣ 田所作成の花火テンプレート(http://jsdo.it/yoppa/1kgU) ‣ 画面下の「Fork」ボタンを押す
  • 74. Canvasアニメーション ‣ まずはJavaScript冒頭のパラメータをいろいろ変更してみる //花火パラメーター var NUM = 2000; //パーティクルの数 var speed = 2.0; //花火の開くスピード var size = 2.0; //火花の大きさ var fade = 0.993; //フェードアウトする割合 var gravity = 0.007; //重力の強さ var length = 4.0; //表示時間(秒) var color = '#ff3300'; //花火の色
  • 75. Canvasアニメーション ‣ 自分のオリジナルの花火ができるはず!!