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

メディア芸術基礎 II

Canvas + Javascriptで図形を描く
2013年10月28日、 11月11日
多摩美術大学情報デザイン学科メディア芸術コース
担当：田所淳

今日の内容
‣ 前回のjQueryから、さらに一歩進んで、HTML5の世界へ

!
‣ HTML5のcanvas要素をつかってみる
‣ canvas要素：プラグインを使用せずに、ブラウザに直接、図
形やアニメーションを描くことができる

!
‣ canvasの準備
‣ 簡単な図形を描く
‣ 色の設定
‣ くりかえしを使って、たくさんの図形を描画する

サンプルファイルのダウンロード
‣ 紹介したサンプルファイルは、全て以下からダウンロードして
ください

‣http://goo.gl/3cqyL

図形やアニメーションを描くには?
‣ これまでの方法
‣ 静止した図形を表示：GIFやJpeg、PNGなどの画像を外部ファ
イルを読み込んでimg要素で表示

Webブラウザ

img要素

外部ファイル
GIF・Jpeg
PNG など

‣ アニメーションや変化する図形を描くには?
‣ Flash Playerや、Java Appletなど外部プラグインを利用

Webブラウザ

プラグイン
外部プログラム
Flashなど

‣ HTML5からは、プラグインを用いずに直接ブラウザに図形や
アニメーションを表示できるようになった
‣ canvas要素にJavaScriptで描画する

Webブラウザ

!
!

JavaScriptで

!

直接描画

canvas要素

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="example" width="400" height="300"></canvas>

‣ canvas要素のid属性：
‣ Javascriptなどのスクリプトで、どのcanvas要素に対して処理
を行うのかを特定する際に必要
‣ anvas要素を使用する際には常にid属性を付けてユニークな(一
意な)名称を指定する
‣ このサンプルの場合は「example」

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>

<!DOCTYPE html>
<html>
<head>
描画の命令を記述した
JavaScript
</style>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
</style>
CSSでCanvas要素の
</head>
周囲に枠線を描画
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
</style>
</head>
<body>
</body>
※表示のためのCanvas要素
</html>

‣ Canvasに図形を描画するためのJavascirptテンプレート
onload = function() {
draw();
};

!

function draw(){
var canvas = document.getElementById('example');
if ( !canvas || !canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
};

draw();
ページの読込が完了したら、draw()を実行
};

!

function draw(){
return false;
}
};

draw();
};

!

function draw(){
if ( !canvas || !canvas.getContext)からcanvas要素を抽出し、
id名( example ) {
return false;
変数 canvas に格納
}
};

draw();
};

!

function draw(){
if ( !canvas || !canvas.getContext ) { canvasに対応していない
return false;
ブラウザのための処理
}
};

draw();
};

!

function draw(){
return false;
}
};

2D図形描画のためのコンテキストを抽出し、
変数 ctx に格納

‣ 実行結果：描画のためのcanvas領域が確保される

基本図形を描画する 1 - 矩形

‣ 生成したcanvas要素の内部に、Javascriptを記述して簡単な図
形を描画してみる

!
‣ まずは、矩形(長方形)から

!
‣ canvasでは矩形を描くための3つの関数が用意されている

!
‣ ﬁllRect(x,y,width,height) : 塗られた矩形を描く
‣ strokeRect(x,y,width,height) : 矩形の輪郭を描く
‣ clearRect(x,y,width,height) : 指定された領域を消去

!
‣ 実際にやってみよう!!

‣ canvasexample.js に命令を追加
draw();
};

!

function draw(){
return false;
}
ctx.fillRect(50,50,540,400);
ctx.clearRect(80,80,400,300);
ctx.strokeRect(240,20,200,300);
};

‣ canvasexample.js に命令を追加
draw();
};

!

function draw(){
return false;
}
ctx.fillRect(50,50,540,400);
※追加した部分
ctx.clearRect(80,80,400,300);
ctx.strokeRect(240,20,200,300);
};

‣ 実行結果：3種類の矩形を表示

基本図形を描画する 2 - パス(直線)を描く

‣ canvasでは、一つのまとまった図形を描けるのは矩形だけ
‣ 他の図形を描くには、複数のパス(線)を組み合わせて作る

!
‣ パスを使用して図形を描くための命令
‣ beginPath() ‒ パスの開始
‣ closePath() ‒ パスを閉じる
‣ stroke() ‒ 線でパスを描く
‣ ﬁll() ‒ 塗り潰しでパスを描く
‣ moveTo(x, y) ‒ パスの始点を移動する

!
‣ やってみよう!!

‣ canvasexample.js の draw()関数に追加
function draw(){
return false;
}
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(500,400);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50,400);
ctx.lineTo(300,20);
ctx.lineTo(520,50);
ctx.closePath();
ctx.fill();
};

function draw(){
return false;
}
ctx.beginPath();
ctx.moveTo(50,50);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50,400);
ctx.lineTo(300,20);
ctx.lineTo(520,50);
ctx.closePath();
ctx.fill();
};

※輪郭線による描画

function draw(){
return false;
}
ctx.beginPath();
ctx.moveTo(50,50);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50,400);
ctx.lineTo(300,20);
ctx.lineTo(520,50);
ctx.closePath();
ctx.fill();
};

※塗りつぶしによる描画

‣ 実行結果：直線の組み合わせによる図形

基本図形を描画する 3 - 円弧や円を描く

‣ 円弧や円を描くために arc メソッドを使う

!
‣ 基本的な書式は以下の通り

!
arc(x,
!
!

y, radius, startAngle, endAngle, anticlockwise);

‣ x, y：円の中心座標
‣ radius：半径
‣ startAngle, endAngle：円弧の始まりと終点をラジアン角で定
義 (ラジアン：0∼2πで一周する角度の単位)
‣ anticlockwise：円弧を描く回転方向を指定

function draw(){
return false;
}
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();
};

function draw(){
return false;
}
ctx.beginPath();
ctx.stroke();

※円弧1

ctx.beginPath();
ctx.stroke();
ctx.beginPath();
ctx.stroke();
ctx.beginPath();
ctx.fill();
};

function draw(){
return false;
}
ctx.beginPath();
ctx.stroke();
ctx.beginPath();
ctx.stroke();

※円弧2

ctx.beginPath();
ctx.stroke();
ctx.beginPath();
ctx.fill();
};

function draw(){
return false;
}
ctx.beginPath();
ctx.stroke();
ctx.beginPath();
ctx.stroke();
ctx.beginPath();
ctx.stroke();

※円弧3

ctx.beginPath();
ctx.fill();
};

function draw(){
return false;
}
ctx.beginPath();
ctx.stroke();
ctx.beginPath();
ctx.stroke();
ctx.beginPath();
ctx.stroke();
ctx.beginPath();
ctx.fill();
};

※円弧4

‣ 実行結果：円弧と円の組み合わせによる描画

基本図形を描画する 4 - 色の設定

‣ 色を図形に適用するためのプロパティは以下の3つ
‣ ﬁllStyle ‒ 塗りの色
‣ strokeStyle ‒ 線の色
‣ globalAlpha ‒ 透明度

!
‣ 色は、CSSなどで使用する16進数によるRGB値で指定する

function draw(){
return false;
}
ctx.globalAlpha = 0.5;
ctx.beginPath();
ctx.fillStyle = '#3399FF';
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#FF9933';
ctx.fill();
};

function draw(){
return false;
}

※全体の透明度の設定

ctx.beginPath();
ctx.fill();
ctx.beginPath();
ctx.fill();
};

function draw(){
return false;
}
ctx.beginPath();
※円1
ctx.fill();
ctx.beginPath();
ctx.fill();
};

function draw(){
return false;
}
ctx.beginPath();
ctx.fill();

※円2

ctx.beginPath();
ctx.fill();
};

‣ 実行結果：2色の半透明の円

まとめ
‣
‣
‣
‣

Canvasについて
描画のためのJavascriptのテンプレート
基本図形の描画
‣ 矩形
‣ 直線
‣ 円弧
‣ 色

jsdo.itをつかってCanvasアニメーション

jsdo.it とは何か?
‣ jsdo.it (http://jsdo.it/)

jsdo.it とは何か?
‣
‣
‣
‣
‣

面白法人カヤックが運営する、コードコミュニティ
登録は無料
HTML5、JavaScript、CSSなどのオンラインエディター
コードをオンラインに保存、公開
投稿されたコードをもとに、自分なりのアレンジを加えて新し
い作品をつくる → Fork

jsdo.it にユーザ登録
‣ まずは、ユーザ登録しましょう
‣ 登録は無料
‣ Google、Facebook、Twitter、Yahoo、Linkedin、Github、
OpenID どれかのアカウントでログイン可能

jsdo.it にユーザ登録
‣ ユーザ設定画面で、ユーザ名や使用言語、アイコンなど各種設
定をしておく
‣ http://jsdo.it/account

プログラムエディタの起動

‣ ヘッダーにある「+ Start Coding」ボタンをおす
‣ プログラムを開発のためのコードエディタが起動


コードエディター
ここにプログラムを入力


プログラムの
プレビュー画面


コンソール
エラー出力など

最初の一歩：Hello World
‣ まずは、はじめの一歩で、画面上に「Hello World」という文
字列を表示するプログラムを作成してみましょう

‣ コードエディタのJavaScriptのタブを選択し、コードを入力
var canvas = document.getElementById('hello');

!

ctx.font = "40px sans-serif";
ctx.fillText("Hello World!!", 20, canvas.height / 2);

‣ HTMLタブ
<canvas id="hello" width="465" height="465"></canvas>

‣ CSSタブ
body {
background-color: #ffffff;
margin:0;
padding:0;
}

‣ Save ボタンを押して、 Finish Editing を押す
‣ コードのプレビューをすると、画面に Hello World の文字が
表示される(はず)

Canvasアニメーション
‣ 先週の内容を復習しながら、簡単なアニメーションを実装
‣ 今回は座標ではなく、円の半径をアニメーションさせてみる
‣ sin関数を使用して、なめらかな動きをつくってみる

‣ JavaScript
//グローバル変数
var canvas = document.getElementById('hello'); //キャンバス
var ctx = canvas.getContext('2d'); //コンテキスト
var frame; //フレーム番号
var radius; //円の半径

!

setup();
};

!

//初期設定
function setup(){
frame = 0;
//アニメーションのインターバル設定
setInterval(draw, 1000/60);
}

‣ 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++;
}

‣ 実行結果：伸び縮みする円のアニメーション

Fork - 共有されているコードをアレンジ

‣ jsdo.it の「Fork」という仕組み
‣ jsdo.itにアップロードされて共有されているプログラムをアレ
ンジして、自分のコードとしてアップできる仕組み
‣ アレンジ元になったコードの履歴が保存される
‣ 何代にもわたってコードをForkしていくことも可能

!
‣ オープンソースコミュニティーのバージョン管理システムの仕
組みを踏襲している (Git、SVN など)
‣ Fork = あるソフトウェアパッケージのソースコードから分岐し
て、別の独立したソフトウェアを開発すること

‣ 花火のテンプレートをFrokしてみる
‣ 田所作成の花火テンプレート(http://jsdo.it/yoppa/1kgU)
‣ 画面下の「Fork」ボタンを押す

‣ まずは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'; //花火の色

‣ 自分のオリジナルの花火ができるはず!!

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

More Related Content

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

More from Atsushi Tadokoro

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