More Related Content
Similar to メディア芸術基礎 II Canvas + Javascriptで図形を描く
Similar to メディア芸術基礎 II Canvas + Javascriptで図形を描く (20)
More from Atsushi Tadokoro
More from Atsushi Tadokoro (20)
メディア芸術基礎 II Canvas + Javascriptで図形を描く
- 9. Canvasとは
‣ ブラウザの対応状況
‣ Internet Explorer 9、Mozilla Firefox、Google Chrome、
Safari、Operaなど全ての主要ブラウザの最新版で実装済み
!
‣ IEの8以前のバージョンは未対応だが、サポートするための外
部ライブラリが開発されている
‣ ExplorerCanvas
- 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>
- 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');
};
- 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);
};
- 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();
};
※塗りつぶしによる描画
- 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
- 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();
};
- 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);
}
- 72. Fork - 共有されているコードをアレンジ
‣ jsdo.it の「Fork」という仕組み
‣ jsdo.itにアップロードされて共有されているプログラムをアレ
ンジして、自分のコードとしてアップできる仕組み
‣ アレンジ元になったコードの履歴が保存される
‣ 何代にもわたってコードをForkしていくことも可能
!
‣ オープンソースコミュニティーのバージョン管理システムの仕
組みを踏襲している (Git、SVN など)
‣ Fork = あるソフトウェアパッケージのソースコードから分岐し
て、別の独立したソフトウェアを開発すること