メディア芸術基礎 ii canvas + javascriptで図形を描く
TRANSCRIPT
メディア芸術基礎 II Canvas + Javascriptで図形を描く
2013年10月28日、 11月11日 多摩美術大学 情報デザイン学科メディア芸術コース 担当:田所淳
今日の内容‣ 前回のjQueryから、さらに一歩進んで、HTML5の世界へ !
‣ HTML5のcanvas要素をつかってみる ‣ canvas要素:プラグインを使用せずに、ブラウザに直接、図形やアニメーションを描くことができる !
‣ canvasの準備 ‣ 簡単な図形を描く ‣ 色の設定 ‣ くりかえしを使って、たくさんの図形を描画する
Canvasとは?
図形やアニメーションを描くには?‣ これまでの方法 ‣ 静止した図形を表示:GIFやJpeg、PNGなどの画像を外部ファイルを読み込んでimg要素で表示
外部ファイル GIF・Jpeg PNG など
Webブラウザ
img要素
図形やアニメーションを描くには?‣ アニメーションや変化する図形を描くには? ‣ Flash Playerや、Java Appletなど外部プラグインを利用
プラグイン
外部プログラム Flashなど
Webブラウザ
図形やアニメーションを描くには?
!!!
canvas要素
‣ HTML5からは、プラグインを用いずに直接ブラウザに図形やアニメーションを表示できるようになった
‣ canvas要素にJavaScriptで描画する
JavaScriptで 直接描画
Webブラウザ
Canvasとは‣ anvas要素はスクリプト(一般的に JavaScript)を使って図形を描くために使われる新しいHTML要素
‣ 元々はMac OS X v10.4の内部でWebKitコンポーネントとしてAppleが開発
‣ HTML5で、新しい標準規格として標準化
Canvasとは‣ ブラウザの対応状況 ‣ Internet Explorer 9、Mozilla Firefox、Google Chrome、Safari、Operaなど全ての主要ブラウザの最新版で実装済み !
‣ IEの8以前のバージョンは未対応だが、サポートするための外部ライブラリが開発されている
‣ ExplorerCanvas
canvas要素の書式‣ canvas要素の書式自身は、img要素とよく似ている !
‣ 例:幅400pix、高さ300pixのcanvas要素を追加する !!!
‣ canvas要素のid属性: ‣ Javascriptなどのスクリプトで、どのcanvas要素に対して処理を行うのかを特定する際に必要
‣ anvas要素を使用する際には常にid属性を付けてユニークな(一意な)名称を指定する
‣ このサンプルの場合は「example」
<canvas id="example" width="400" height="300"></canvas>
canvasの準備 ‒ 基本テンプレート
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>
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>
描画の命令を記述した JavaScript
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>
CSSでCanvas要素の 周囲に枠線を描画
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>
※表示のためのCanvas要素
canvas要素の書式‣ Canvasに図形を描画するためのJavascirptテンプレート
onload = function() { draw(); }; !function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); };
canvas要素の書式‣ Canvasに図形を描画するためのJavascirptテンプレート
onload = function() { draw(); }; !function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); };
ページの読込が完了したら、draw()を実行
canvas要素の書式‣ Canvasに図形を描画するためのJavascirptテンプレート
onload = function() { draw(); }; !function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); };
id名(‘example’)からcanvas要素を抽出し、 変数 canvas に格納
canvas要素の書式‣ Canvasに図形を描画するためのJavascirptテンプレート
onload = function() { draw(); }; !function draw(){ var canvas = document.getElementById('example'); if ( !canvas || !canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); };
canvasに対応していない ブラウザのための処理
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 に格納
canvas要素の書式‣ 実行結果:描画のためのcanvas領域が確保される
基本図形を描画する 1 - 矩形
基本図形を描画する 1 - 矩形‣ 生成したcanvas要素の内部に、Javascriptを記述して簡単な図形を描画してみる !
‣ まずは、矩形(長方形)から !
‣ canvasでは矩形を描くための3つの関数が用意されている !
‣ fillRect(x,y,width,height) : 塗られた矩形を描く ‣ strokeRect(x,y,width,height) : 矩形の輪郭を描く ‣ clearRect(x,y,width,height) : 指定された領域を消去 !
‣ 実際にやってみよう!!
基本図形を描画する 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); };
基本図形を描画する 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); };
※追加した部分
基本図形を描画する 1 - 矩形‣ 実行結果:3種類の矩形を表示
基本図形を描画する 2 - パス(直線)を描く
基本図形を描画する 2 - パス(直線)を描く‣ canvasでは、一つのまとまった図形を描けるのは矩形だけ ‣ 他の図形を描くには、複数のパス(線)を組み合わせて作る !
‣ パスを使用して図形を描くための命令 ‣ beginPath() ‒ パスの開始 ‣ closePath() ‒ パスを閉じる ‣ stroke() ‒ 線でパスを描く ‣ fill() ‒ 塗り潰しでパスを描く ‣ moveTo(x, y) ‒ パスの始点を移動する !
‣ やってみよう!!
基本図形を描画する 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(); };
基本図形を描画する 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(); };
※輪郭線による描画
基本図形を描画する 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(); };
※塗りつぶしによる描画
基本図形を描画する 2 - パス(直線)を描く‣ 実行結果:直線の組み合わせによる図形
基本図形を描画する 3 - 円弧や円を描く
基本図形を描画する 3 - 円弧や円を描く‣ 円弧や円を描くために arc メソッドを使う !
‣ 基本的な書式は以下の通り !!!
‣ x, y:円の中心座標 ‣ radius:半径 ‣ startAngle, endAngle:円弧の始まりと終点をラジアン角で定義 (ラジアン:0~2πで一周する角度の単位)
‣ anticlockwise:円弧を描く回転方向を指定
arc(x, y, radius, startAngle, endAngle, anticlockwise);
基本図形を描画する 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(); };
基本図形を描画する 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(); };
※円弧1
基本図形を描画する 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(); };
※円弧2
基本図形を描画する 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(); };
※円弧3
基本図形を描画する 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
基本図形を描画する 3 - 円弧や円を描く‣ 実行結果:円弧と円の組み合わせによる描画
基本図形を描画する 4 - 色の設定
基本図形を描画する 4 - 色の設定‣ 色を図形に適用するためのプロパティは以下の3つ ‣ fillStyle ‒ 塗りの色 ‣ strokeStyle ‒ 線の色 ‣ globalAlpha ‒ 透明度 !
‣ 色は、CSSなどで使用する16進数によるRGB値で指定する
基本図形を描画する 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(); };
基本図形を描画する 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(); };
※全体の透明度の設定
基本図形を描画する 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(); };
※円1
基本図形を描画する 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(); };
※円2
基本図形を描画する 4 - 色の設定‣ 実行結果:2色の半透明の円
まとめ‣ Canvasについて ‣ canvas要素の書式 ‣ 描画のためのJavascriptのテンプレート ‣ 基本図形の描画 ‣ 矩形 ‣ 直線 ‣ 円弧 ‣ 色
jsdo.itをつかってCanvasアニメーション
jsdo.it とは何か?‣ jsdo.it (http://jsdo.it/)
jsdo.it とは何か?‣ 面白法人カヤックが運営する、コードコミュニティ ‣ 登録は無料 ‣ HTML5、JavaScript、CSSなどのオンラインエディター ‣ コードをオンラインに保存、公開 ‣ 投稿されたコードをもとに、自分なりのアレンジを加えて新しい作品をつくる → “Fork”
jsdo.it にユーザ登録
jsdo.it にユーザ登録‣ まずは、ユーザ登録しましょう ‣ 登録は無料 ‣ Google、Facebook、Twitter、Yahoo、Linkedin、Github、OpenID どれかのアカウントでログイン可能
プログラムエディタの起動
プログラムエディタの起動‣ ヘッダーにある「+ Start Coding」ボタンをおす ‣ プログラムを開発のためのコードエディタが起動
プログラムエディタの起動‣ ヘッダーにある「+ Start Coding」ボタンをおす ‣ プログラムを開発のためのコードエディタが起動
コードエディター ここにプログラムを入力
プログラムエディタの起動‣ ヘッダーにある「+ Start Coding」ボタンをおす ‣ プログラムを開発のためのコードエディタが起動
プログラムの プレビュー画面
プログラムエディタの起動‣ ヘッダーにある「+ Start Coding」ボタンをおす ‣ プログラムを開発のためのコードエディタが起動
コンソール エラー出力など
最初の一歩:Hello World
最初の一歩:Hello World‣ まずは、はじめの一歩で、画面上に「Hello World」という文字列を表示するプログラムを作成してみましょう
var canvas = document.getElementById('hello'); var ctx = canvas.getContext('2d'); !ctx.font = "40px sans-serif"; ctx.fillText("Hello World!!", 20, canvas.height / 2);
最初の一歩:Hello World‣ コードエディタのJavaScriptのタブを選択し、コードを入力
<canvas id="hello" width="465" height="465"></canvas>
最初の一歩:Hello World‣ HTMLタブ
body { background-color: #ffffff; margin:0; padding:0; }
最初の一歩:Hello World‣ CSSタブ
最初の一歩:Hello World‣ “Save”ボタンを押して、”Finish Editing”を押す ‣ コードのプレビューをすると、画面に”Hello World”の文字が表示される(はず)
Canvasアニメーション
Canvasアニメーション‣ 先週の内容を復習しながら、簡単なアニメーションを実装 ‣ 今回は座標ではなく、円の半径をアニメーションさせてみる ‣ sin関数を使用して、なめらかな動きをつくってみる
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); }
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++; }
Canvasアニメーション‣ 実行結果:伸び縮みする円のアニメーション
Fork - 共有されているコードをアレンジ
Fork - 共有されているコードをアレンジ‣ jsdo.it の「Fork」という仕組み ‣ jsdo.itにアップロードされて共有されているプログラムをアレンジして、自分のコードとしてアップできる仕組み
‣ アレンジ元になったコードの履歴が保存される ‣ 何代にもわたってコードをForkしていくことも可能 !
‣ オープンソースコミュニティーのバージョン管理システムの仕組みを踏襲している (Git、SVN など)
‣ Fork = あるソフトウェアパッケージのソースコードから分岐して、別の独立したソフトウェアを開発すること
Fork - 共有されているコードをアレンジ‣ 花火のテンプレートをFrokしてみる ‣ 田所作成の花火テンプレート(http://jsdo.it/yoppa/1kgU) ‣ 画面下の「Fork」ボタンを押す
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'; //花火の色
Canvasアニメーション‣ 自分のオリジナルの花火ができるはず!!