情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く

情報編集(Web)
HTML5 実践1
Canvas + Javascriptで図形を描く
2013年6月18日
東京藝術大学芸術情報センター(AMC)
担当：田所淳

今日の内容
‣ 前回のjQueryから、さらに一歩進んで、HTML5の世界へ
‣ HTML5のcanvas要素をつかってみる
‣ canvas要素：プラグインを使用せずに、ブラウザに直接、図
形やアニメーションを描くことができる
‣ canvasの準備
‣ 簡単な図形を描く
‣ 色の設定
‣ くりかえしを使って、たくさんの図形を描画する

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

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

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

‣ HTML5からは、プラグインを用いずに直接ブラウザに図形や
アニメーションを表示できるようになった
‣ canvas要素にJavaScriptで描画する
canvas要素
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の準備 ‒ 基本テンプレート

‣ まず、ベースとなる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>
! !
! !
! ! </style>
! </head>
! <body>
!
!
! </body>
</html>
※描画の命令を記述したJavaScript

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

<!DOCTYPE html>
<html>
! <head>
! !
! !
! ! </style>
! </head>
! <body>
!
!
! </body>
</html>
※表示のための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();
};
function draw(){
!
! ! return false;
! }
!
!
};
※ページの読込が完了したら、draw()を実行

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

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

! 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.closePath();
! ctx.fill();
};

function draw(){
! ! return false;
! }
! ctx.beginPath();
! ctx.closePath();
! ctx.stroke();
! ctx.beginPath();
! ctx.closePath();
! ctx.fill();
};
※輪郭線による描画

function draw(){
! ! return false;
! }
! ctx.beginPath();
! ctx.closePath();
! ctx.stroke();
! ctx.beginPath();
! ctx.closePath();
! ctx.fill();
};
※塗りつぶしによる描画

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

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

‣ 円弧や円を描くために arc メソッドを使う
‣ 基本的な書式は以下の通り
‣ x, y：円の中心座標
‣ radius：半径
‣ startAngle, endAngle：円弧の始まりと終点をラジアン角
で定義 (ラジアン：0∼2πで一周する角度の単位)
‣ anticlockwise：円弧を描く回転方向を指定
arc(x, y, radius, startAngle, endAngle, 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();
! ctx.beginPath();
! ctx.stroke();
! ctx.beginPath();
! ctx.stroke();
! ctx.beginPath();
! ctx.fill();
};
※円弧1

function draw(){
! ! return false;
! }
! ctx.beginPath();
! ctx.stroke();
! ctx.beginPath();
! ctx.stroke();
! ctx.beginPath();
! ctx.stroke();
! ctx.beginPath();
! ctx.fill();
};
※円弧2

function draw(){
! ! return false;
! }
! ctx.beginPath();
! ctx.stroke();
! ctx.beginPath();
! ctx.stroke();
! ctx.beginPath();
! ctx.stroke();
! ctx.beginPath();
! ctx.fill();
};
※円弧3

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();
! ctx.fill();
! ctx.beginPath();
! ctx.fill();
};
※円1

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

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

まとめ
‣ 今日はここまで
‣ Canvasについて
‣ canvas要素の書式
‣ 描画のためのJavascriptのテンプレート
‣ 基本図形の描画
‣ 矩形
‣ 直線
‣ 円弧
‣ 色

情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く

More Related Content

What's hot

Similar to 情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く

More from Atsushi Tadokoro

情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く