情報編集(Web)HTML5 実践1Canvas + Javascriptで図形を描く2013年6月18日東京藝術大学 芸術情報センター(AMC)担当:田所淳
今日の内容‣ 前回のjQueryから、さらに一歩進んで、HTML5の世界へ‣ HTML5のcanvas要素をつかってみる‣ canvas要素:プラグインを使用せずに、ブラウザに直接、図形やアニメーションを描くことができる‣ canvasの準備‣...
サンプルファイルのダウンロード‣ 紹介したサンプルファイルは、全て以下からダウンロードしてください‣http://goo.gl/EcRSO
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、GoogleChrome、Safari、Operaなど全ての主要ブラウザの最新版で実装済み‣ IEの8以前のバージョンは未対応だが...
canvas要素の書式‣ canvas要素の書式自身は、img要素とよく似ている‣ 例:幅400pix、高さ300pixのcanvas要素を追加する‣ canvas要素のid属性:‣ Javascriptなどのスクリプトで、どのcanvas要素...
canvasの準備 ‒ 基本テンプレート
canvas要素の書式‣ まず、ベースとなるHTMLを用意する (index.html)‣<!DOCTYPE html><html>! <head>! ! <meta http-equiv="Content-Type" charset="utf...
canvas要素の書式‣ まず、ベースとなるHTMLを用意する (index.html)‣<!DOCTYPE html><html>! <head>! ! <meta http-equiv="Content-Type" charset="utf...
canvas要素の書式‣ まず、ベースとなるHTMLを用意する (index.html)‣<!DOCTYPE html><html>! <head>! ! <meta http-equiv="Content-Type" charset="utf...
canvas要素の書式‣ まず、ベースとなるHTMLを用意する (index.html)<!DOCTYPE html><html>! <head>! ! <meta http-equiv="Content-Type" charset="utf-...
canvas要素の書式‣ Canvasに図形を描画するためのJavascirptテンプレートonload = function() {! draw();};function draw(){! var canvas = document.getE...
canvas要素の書式‣ Canvasに図形を描画するためのJavascirptテンプレートonload = function() {! draw();};function draw(){! var canvas = document.getE...
canvas要素の書式‣ Canvasに図形を描画するためのJavascirptテンプレートonload = function() {! draw();};function draw(){! var canvas = document.getE...
canvas要素の書式‣ Canvasに図形を描画するためのJavascirptテンプレートonload = function() {! draw();};function draw(){! var canvas = document.getE...
canvas要素の書式‣ Canvasに図形を描画するためのJavascirptテンプレートonload = function() {! draw();};function draw(){! var canvas = document.getE...
canvas要素の書式‣ 実行結果:描画のためのcanvas領域が確保される
基本図形を描画する 1 - 矩形
基本図形を描画する 1 - 矩形‣ 生成したcanvas要素の内部に、Javascriptを記述して簡単な図形を描画してみる‣ まずは、矩形(長方形)から‣ canvasでは矩形を描くための3つの関数が用意されている‣ fillRect(x,y,...
基本図形を描画する 1 - 矩形‣ canvasexample.js に命令を追加onload = function() {! draw();};function draw(){! var canvas = document.getElemen...
基本図形を描画する 1 - 矩形‣ canvasexample.js に命令を追加onload = function() {! draw();};function draw(){! var canvas = document.getElemen...
基本図形を描画する 1 - 矩形‣ 実行結果:3種類の矩形を表示
基本図形を描画する 2 - パス(直線)を描く
基本図形を描画する 2 - パス(直線)を描く‣ canvasでは、一つのまとまった図形を描けるのは矩形だけ‣ 他の図形を描くには、複数のパス(線)を組み合わせて作る‣ パスを使用して図形を描くための命令‣ beginPath() ‒ パスの開...
基本図形を描画する 2 - パス(直線)を描く‣ canvasexample.js の draw()関数に追加function draw(){! var canvas = document.getElementById(example);! i...
基本図形を描画する 2 - パス(直線)を描く‣ canvasexample.js の draw()関数に追加function draw(){! var canvas = document.getElementById(example);! i...
基本図形を描画する 2 - パス(直線)を描く‣ canvasexample.js の draw()関数に追加function draw(){! var canvas = document.getElementById(example);! i...
基本図形を描画する 2 - パス(直線)を描く‣ 実行結果:直線の組み合わせによる図形
基本図形を描画する 3 - 円弧や円を描く
基本図形を描画する 3 - 円弧や円を描く‣ 円弧や円を描くために arc メソッドを使う‣ 基本的な書式は以下の通り‣ x, y:円の中心座標‣ radius:半径‣ startAngle, endAngle:円弧の始まりと終点をラジアン角で...
基本図形を描画する 3 - 円弧や円を描く‣ canvasexample.js の draw()関数に追加function draw(){! var canvas = document.getElementById(example);! if ...
基本図形を描画する 3 - 円弧や円を描く‣ canvasexample.js の draw()関数に追加function draw(){! var canvas = document.getElementById(example);! if ...
基本図形を描画する 3 - 円弧や円を描く‣ canvasexample.js の draw()関数に追加function draw(){! var canvas = document.getElementById(example);! if ...
基本図形を描画する 3 - 円弧や円を描く‣ canvasexample.js の draw()関数に追加function draw(){! var canvas = document.getElementById(example);! if ...
基本図形を描画する 3 - 円弧や円を描く‣ canvasexample.js の draw()関数に追加function draw(){! var canvas = document.getElementById(example);! if ...
基本図形を描画する 3 - 円弧や円を描く‣ 実行結果:円弧と円の組み合わせによる描画
基本図形を描画する 4 - 色の設定
基本図形を描画する 4 - 色の設定‣ 色を図形に適用するためのプロパティは以下の3つ‣ fillStyle ‒ 塗りの色‣ strokeStyle ‒ 線の色‣ globalAlpha ‒ 透明度‣ 色は、CSSなどで使用する16進数によるRG...
基本図形を描画する 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のテンプレート‣ 基本図形の描画‣ 矩形‣ 直線‣ 円弧‣ 色
Upcoming SlideShare
Loading in …5
×

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

5,446 views

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,446
On SlideShare
0
From Embeds
0
Number of Embeds
672
Actions
Shares
0
Downloads
13
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. 情報編集(Web)HTML5 実践1Canvas + Javascriptで図形を描く2013年6月18日東京藝術大学 芸術情報センター(AMC)担当:田所淳
  2. 2. 今日の内容‣ 前回のjQueryから、さらに一歩進んで、HTML5の世界へ‣ HTML5のcanvas要素をつかってみる‣ canvas要素:プラグインを使用せずに、ブラウザに直接、図形やアニメーションを描くことができる‣ canvasの準備‣ 簡単な図形を描く‣ 色の設定‣ くりかえしを使って、たくさんの図形を描画する
  3. 3. サンプルファイルのダウンロード‣ 紹介したサンプルファイルは、全て以下からダウンロードしてください‣http://goo.gl/EcRSO
  4. 4. Canvasとは?
  5. 5. 図形やアニメーションを描くには?‣ これまでの方法‣ 静止した図形を表示:GIFやJpeg、PNGなどの画像を外部ファイルを読み込んでimg要素で表示外部ファイルGIF・JpegPNG などWebブラウザimg要素
  6. 6. 図形やアニメーションを描くには?‣ アニメーションや変化する図形を描くには?‣ Flash Playerや、Java Appletなど外部プラグインを利用プラグイン外部プログラムFlashなどWebブラウザ
  7. 7. ‣ HTML5からは、プラグインを用いずに直接ブラウザに図形やアニメーションを表示できるようになった‣ canvas要素にJavaScriptで描画するcanvas要素図形やアニメーションを描くには?JavaScriptで直接描画Webブラウザ
  8. 8. Canvasとは‣ anvas要素はスクリプト(一般的に JavaScript)を使って図形を描くために使われる新しいHTML要素‣ 元々はMac OS X v10.4の内部でWebKitコンポーネントとしてAppleが開発‣ HTML5で、新しい標準規格として標準化
  9. 9. Canvasとは‣ ブラウザの対応状況‣ Internet Explorer 9、Mozilla Firefox、GoogleChrome、Safari、Operaなど全ての主要ブラウザの最新版で実装済み‣ IEの8以前のバージョンは未対応だが、サポートするための外部ライブラリが開発されている‣ ExplorerCanvas
  10. 10. canvas要素の書式‣ canvas要素の書式自身は、img要素とよく似ている‣ 例:幅400pix、高さ300pixのcanvas要素を追加する‣ canvas要素のid属性:‣ Javascriptなどのスクリプトで、どのcanvas要素に対して処理を行うのかを特定する際に必要‣ anvas要素を使用する際には常にid属性を付けてユニークな(一意な)名称を指定する‣ このサンプルの場合は「example」<canvas id="example" width="400" height="300"></canvas>
  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; }! ! </style>! </head>! <body>!! ! <canvas id="example" width="400" height="300"></canvas>!! </body></html>※描画の命令を記述したJavaScript
  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>! </head>! <body>!! ! <canvas id="example" width="400" height="300"></canvas>!! </body></html>※CSSで、Canvas要素の周囲に枠線を描画
  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></html>※表示のためのCanvas要素
  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();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas || !canvas.getContext ) {! ! return false;! }!! var ctx = canvas.getContext(2d);!};※ページの読込が完了したら、draw()を実行
  18. 18. canvas要素の書式‣ Canvasに図形を描画するためのJavascirptテンプレートonload = function() {! draw();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas || !canvas.getContext ) {! ! return false;! }!! var ctx = canvas.getContext(2d);!};※id名( example )からcanvas要素を抽出し、変数 canvas に格納
  19. 19. canvas要素の書式‣ Canvasに図形を描画するためのJavascirptテンプレートonload = function() {! draw();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas || !canvas.getContext ) {! ! return false;! }!! var ctx = canvas.getContext(2d);!};※canvasに対応していないブラウザのための処理
  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 メソッドを使う‣ 基本的な書式は以下の通り‣ x, y:円の中心座標‣ radius:半径‣ startAngle, endAngle:円弧の始まりと終点をラジアン角で定義 (ラジアン:0∼2πで一周する角度の単位)‣ anticlockwise:円弧を描く回転方向を指定arc(x, y, radius, startAngle, endAngle, 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();! 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
  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();! 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();};※円弧2
  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();! ctx.beginPath();! ctx.arc(320,240,40,0,Math.PI*2.0,true);! ctx.fill();};※円弧3
  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();! 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
  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();! ctx.beginPath();! ctx.fillStyle = #FF9933;! ctx.arc(400,240,160,0,Math.PI*2.0,true);! ctx.fill();};※円2
  47. 47. 基本図形を描画する 4 - 色の設定‣ 実行結果:2色の半透明の円
  48. 48. まとめ‣ 今日はここまで‣ Canvasについて‣ canvas要素の書式‣ 描画のためのJavascriptのテンプレート‣ 基本図形の描画‣ 矩形‣ 直線‣ 円弧‣ 色

×