html5 canvas + javascriptで図形を描く- 千葉商科大 web動画表現

Web動画表現第7回：HTML5 実践1Canvas + Javascriptで図形を描く

千葉商科大学政策情報学部2011年11月9日担当：田所淳

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

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

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

サンプルファイルのダウンロード‣ 紹介したサンプルファイルは、全て以下からダウンロードすることが可能です

‣http://goo.gl/hUOrp

http://goo.gl/hUOrp

http://goo.gl/hUOrp

Canvasとは?

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

外部ファイルGIF・JpegPNG など

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

http://excanvas.sourceforge.net/

http://excanvas.sourceforge.net/

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>



※描画の命令を記述したJavaScript



※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>


※表示のためのCanvas要素

canvas要素の書式‣ Canvasに図形を描画するためのJavascirptテンプレート‣ canvasexample.js‣onload = function() {! draw();};

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



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



※id名(‘example’)からcanvas要素を抽出し、変数 canvas に格納



※canvasに対応していないブラウザのための処理


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 - パス(直線)を描く‣ 実行結果：直線の組み合わせによる図形

基本図形を描画する 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();};






※円弧1






※円弧2






※円弧3






※円弧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();};





※全体の透明度の設定





※円1





※円2

基本図形を描画する 4 - 色の設定‣ 実行結果：2色の半透明の円

まとめ‣ 今日はここまで

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

‣ 来週はCanvasを使用したアニメーションを行います!

html5 canvas + javascriptで図形を描く- 千葉商科大 web動画表現

Technology