Your SlideShare is downloading. ×
0
メディア芸術基礎 II

Canvas + Javascriptで図形を描く
2013年10月28日、 11月11日
多摩美術大学 情報デザイン学科メディア芸術コース
担当:田所淳
今日の内容
‣ 前回のjQueryから、さらに一歩進んで、HTML5の世界へ

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

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

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

Webブラウザ

img要素

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

Webブラウザ

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

Webブラウザ

!
!

JavaScriptで...
Canvasとは
‣ anvas要素はスクリプト(一般的に JavaScript)を使って図形を
描くために使われる新しいHTML要素
‣ 元々はMac OS X v10.4の内部でWebKitコンポーネントとして
Appleが開発
‣ HTM...
Canvasとは
‣ ブラウザの対応状況
‣ Internet Explorer 9、Mozilla Firefox、Google Chrome、
Safari、Operaなど全ての主要ブラウザの最新版で実装済み

!
‣ IEの8以前のバージ...
canvas要素の書式
‣ canvas要素の書式自身は、img要素とよく似ている

!
‣ 例:幅400pix、高さ300pixのcanvas要素を追加する

!
<canvas
!
!

id="example" width="400" h...
canvasの準備 ‒ 基本テンプレート
canvas要素の書式
‣ まず、ベースとなるHTMLを用意する (index.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset="utf-8...
canvas要素の書式
‣ まず、ベースとなるHTMLを用意する (index.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset="utf-8...
canvas要素の書式
‣ まず、ベースとなるHTMLを用意する (index.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset="utf-8...
canvas要素の書式
‣ まず、ベースとなるHTMLを用意する (index.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset="utf-8...
canvas要素の書式
‣ Canvasに図形を描画するためのJavascirptテンプレート
onload = function() {
draw();
};

!

function draw(){
var canvas = documen...
canvas要素の書式
‣ Canvasに図形を描画するためのJavascirptテンプレート
onload = function() {
draw();
ページの読込が完了したら、draw()を実行
};

!

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

!

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

!

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

!

function draw(){
var canvas = documen...
canvas要素の書式
‣ 実行結果:描画のためのcanvas領域が確保される
基本図形を描画する 1 - 矩形
基本図形を描画する 1 - 矩形
‣ 生成したcanvas要素の内部に、Javascriptを記述して簡単な図
形を描画してみる

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

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

!
...
基本図形を描画する 1 - 矩形
‣ canvasexample.js に命令を追加
onload = function() {
draw();
};

!

function draw(){
var canvas = document.get...
基本図形を描画する 1 - 矩形
‣ canvasexample.js に命令を追加
onload = function() {
draw();
};

!

function draw(){
var canvas = document.get...
基本図形を描画する 1 - 矩形
‣ 実行結果:3種類の矩形を表示
基本図形を描画する 2 - パス(直線)を描く
基本図形を描画する 2 - パス(直線)を描く
‣ canvasでは、一つのまとまった図形を描けるのは矩形だけ
‣ 他の図形を描くには、複数のパス(線)を組み合わせて作る

!
‣ パスを使用して図形を描くための命令
‣ beginPath()...
基本図形を描画する 2 - パス(直線)を描く
‣ canvasexample.js の draw()関数に追加
function draw(){
var canvas = document.getElementById('example');...
基本図形を描画する 2 - パス(直線)を描く
‣ canvasexample.js の draw()関数に追加
function draw(){
var canvas = document.getElementById('example');...
基本図形を描画する 2 - パス(直線)を描く
‣ canvasexample.js の draw()関数に追加
function draw(){
var canvas = document.getElementById('example');...
基本図形を描画する 2 - パス(直線)を描く
‣ 実行結果:直線の組み合わせによる図形
基本図形を描画する 3 - 円弧や円を描く
基本図形を描画する 3 - 円弧や円を描く
‣ 円弧や円を描くために arc メソッドを使う

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

!
arc(x,
!
!

y, radius, startAngle, endAngle, anticlock...
基本図形を描画する 3 - 円弧や円を描く
‣ canvasexample.js の draw()関数に追加
function draw(){
var canvas = document.getElementById('example');
i...
基本図形を描画する 3 - 円弧や円を描く
‣ canvasexample.js の draw()関数に追加
function draw(){
var canvas = document.getElementById('example');
i...
基本図形を描画する 3 - 円弧や円を描く
‣ canvasexample.js の draw()関数に追加
function draw(){
var canvas = document.getElementById('example');
i...
基本図形を描画する 3 - 円弧や円を描く
‣ canvasexample.js の draw()関数に追加
function draw(){
var canvas = document.getElementById('example');
i...
基本図形を描画する 3 - 円弧や円を描く
‣ canvasexample.js の draw()関数に追加
function draw(){
var canvas = document.getElementById('example');
i...
基本図形を描画する 3 - 円弧や円を描く
‣ 実行結果:円弧と円の組み合わせによる描画
基本図形を描画する 4 - 色の設定
基本図形を描画する 4 - 色の設定
‣ 色を図形に適用するためのプロパティは以下の3つ
‣ fillStyle ‒ 塗りの色
‣ strokeStyle ‒ 線の色
‣ globalAlpha ‒ 透明度

!
‣ 色は、CSSなどで使用する1...
基本図形を描画する 4 - 色の設定
‣ canvasexample.js の draw()関数に追加
function draw(){
var canvas = document.getElementById('example');
if (...
基本図形を描画する 4 - 色の設定
‣ canvasexample.js の draw()関数に追加
function draw(){
var canvas = document.getElementById('example');
if (...
基本図形を描画する 4 - 色の設定
‣ canvasexample.js の draw()関数に追加
function draw(){
var canvas = document.getElementById('example');
if (...
基本図形を描画する 4 - 色の設定
‣ canvasexample.js の draw()関数に追加
function draw(){
var canvas = document.getElementById('example');
if (...
基本図形を描画する 4 - 色の設定
‣ 実行結果:2色の半透明の円
まとめ
‣
‣
‣
‣

Canvasについて
canvas要素の書式
描画のためのJavascriptのテンプレート
基本図形の描画
‣ 矩形
‣ 直線
‣ 円弧
‣ 色
jsdo.itをつかってCanvasアニメーション
jsdo.it とは何か?
‣ jsdo.it (http://jsdo.it/)
jsdo.it とは何か?
‣
‣
‣
‣
‣

面白法人カヤックが運営する、コードコミュニティ
登録は無料
HTML5、JavaScript、CSSなどのオンラインエディター
コードをオンラインに保存、公開
投稿されたコードをもとに、自分なり...
jsdo.it にユーザ登録
jsdo.it にユーザ登録
‣ まずは、ユーザ登録しましょう
‣ 登録は無料
‣ Google、Facebook、Twitter、Yahoo、Linkedin、Github、
OpenID どれかのアカウントでログイン可能
jsdo.it にユーザ登録
‣ ユーザ設定画面で、ユーザ名や使用言語、アイコンなど各種設
定をしておく
‣ http://jsdo.it/account
プログラムエディタの起動
プログラムエディタの起動
‣ ヘッダーにある「+ Start Coding」ボタンをおす
‣ プログラムを開発のためのコードエディタが起動
プログラムエディタの起動
‣ ヘッダーにある「+ Start Coding」ボタンをおす
‣ プログラムを開発のためのコードエディタが起動

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

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

コンソール
エラー出力など
最初の一歩:Hello World
最初の一歩:Hello World
‣ まずは、はじめの一歩で、画面上に「Hello World」という文
字列を表示するプログラムを作成してみましょう
最初の一歩:Hello World
‣ コードエディタのJavaScriptのタブを選択し、コードを入力
var canvas = document.getElementById('hello');
var ctx = canvas.getCo...
最初の一歩:Hello World
‣ HTMLタブ
<canvas id="hello" width="465" height="465"></canvas>
最初の一歩:Hello World
‣ CSSタブ
body {
background-color: #ffffff;
margin:0;
padding:0;
}
最初の一歩:Hello World
‣ Save ボタンを押して、 Finish Editing を押す
‣ コードのプレビューをすると、画面に Hello World の文字が
表示される(はず)
Canvasアニメーション
Canvasアニメーション
‣ 先週の内容を復習しながら、簡単なアニメーションを実装
‣ 今回は座標ではなく、円の半径をアニメーションさせてみる
‣ sin関数を使用して、なめらかな動きをつくってみる
Canvasアニメーション
‣ JavaScript
//グローバル変数
var canvas = document.getElementById('hello'); //キャンバス
var ctx = canvas.getContext('2...
Canvasアニメーション
‣ JavaScript
//くりかえし描画
function draw(){
//画面の消去
ctx.clearRect(0, 0, canvas.width, canvas.height);
//円の半径を、si...
Canvasアニメーション
‣ 実行結果:伸び縮みする円のアニメーション
Fork - 共有されているコードをアレンジ
Fork - 共有されているコードをアレンジ
‣ jsdo.it の「Fork」という仕組み
‣ jsdo.itにアップロードされて共有されているプログラムをアレ
ンジして、自分のコードとしてアップできる仕組み
‣ アレンジ元になったコードの履...
Fork - 共有されているコードをアレンジ
‣ 花火のテンプレートをFrokしてみる
‣ 田所作成の花火テンプレート(http://jsdo.it/yoppa/1kgU)
‣ 画面下の「Fork」ボタンを押す
Canvasアニメーション
‣ まずはJavaScript冒頭のパラメータをいろいろ変更してみる
//花火パラメーター
var NUM = 2000; //パーティクルの数
var speed = 2.0; //花火の開くスピード
var si...
Canvasアニメーション
‣ 自分のオリジナルの花火ができるはず!!
Upcoming SlideShare
Loading in...5
×

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

1,993

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,993
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×