‣‣‣‣‣‣‣
‣‣http://goo.gl/hUOrp
‣‣
‣‣
‣‣
‣‣‣
‣‣‣‣ ExplorerCanvas
‣‣<canvas id="example" width="400" height="300"></canvas>‣‣‣‣
‣‣<!DOCTYPE   html><html>! <head>! !    <meta http-equiv="Content-Type" charset="utf-8" />! !    <title>Canvas Example</ti...
‣‣<!DOCTYPE   html><html>! <head>! !    <meta http-equiv="Content-Type" charset="utf-8" />! !    <title>Canvas Example</ti...
‣‣<!DOCTYPE   html><html>! <head>! !    <meta http-equiv="Content-Type" charset="utf-8" />! !    <title>Canvas Example</ti...
‣<!DOCTYPE html><html>! <head>! !    <meta http-equiv="Content-Type" charset="utf-8" />! !    <title>Canvas Example</title...
‣‣‣onload   = function() {!    draw();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas ||...
‣‣‣onload   = function() {!    draw();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas ||...
‣‣‣onload   = function() {!    draw();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas ||...
‣‣‣onload   = function() {!    draw();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas ||...
‣‣‣onload   = function() {!    draw();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas ||...
‣
‣‣‣‣‣‣‣
‣onload = function() {! draw();};function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas...
‣onload = function() {! draw();};function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas...
‣
‣‣‣    ‣    ‣    ‣    ‣    ‣‣
‣function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas.getContext ) {! !    return fal...
‣function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas.getContext ) {! !    return fal...
‣function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas.getContext ) {! !    return fal...
‣
‣‣arc(x, y, radius, startAngle, endAngle, anticlockwise);‣‣‣‣
‣function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas.getContext ) {! !     return fa...
‣function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas.getContext ) {! !     return fa...
‣function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas.getContext ) {! !     return fa...
‣function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas.getContext ) {! !     return fa...
‣function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas.getContext ) {! !     return fa...
‣
‣    ‣    ‣    ‣‣
‣function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas.getContext ) {! !    return fal...
‣function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas.getContext ) {! !    return fal...
‣function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas.getContext ) {! !    return fal...
‣function draw(){! var canvas = document.getElementById(example);! if ( !canvas || !canvas.getContext ) {! !    return fal...
‣
‣‣‣‣‣    ‣    ‣    ‣    ‣‣
HTML5 Canvas + Javascriptで図形を描く- 千葉商科大 Web動画表現
HTML5 Canvas + Javascriptで図形を描く- 千葉商科大 Web動画表現
HTML5 Canvas + Javascriptで図形を描く- 千葉商科大 Web動画表現
HTML5 Canvas + Javascriptで図形を描く- 千葉商科大 Web動画表現
HTML5 Canvas + Javascriptで図形を描く- 千葉商科大 Web動画表現
HTML5 Canvas + Javascriptで図形を描く- 千葉商科大 Web動画表現
HTML5 Canvas + Javascriptで図形を描く- 千葉商科大 Web動画表現
Upcoming SlideShare
Loading in …5
×

HTML5 Canvas + Javascriptで図形を描く- 千葉商科大 Web動画表現

3,677 views

Published on

Published in: Technology, Business
  • Be the first to comment

HTML5 Canvas + Javascriptで図形を描く- 千葉商科大 Web動画表現

  1. 1. ‣‣‣‣‣‣‣
  2. 2. ‣‣http://goo.gl/hUOrp
  3. 3. ‣‣
  4. 4. ‣‣
  5. 5. ‣‣
  6. 6. ‣‣‣
  7. 7. ‣‣‣‣ ExplorerCanvas
  8. 8. ‣‣<canvas id="example" width="400" height="300"></canvas>‣‣‣‣
  9. 9. ‣‣<!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>
  10. 10. ‣‣<!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>
  11. 11. ‣‣<!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>
  12. 12. ‣<!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. ‣‣‣onload = function() {! draw();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas || !canvas.getContext ) {! ! return false;! }!! var ctx = canvas.getContext(2d);!};
  14. 14. ‣‣‣onload = function() {! draw();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas || !canvas.getContext ) {! ! return false;! }!! var ctx = canvas.getContext(2d);!};
  15. 15. ‣‣‣onload = function() {! draw();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas || !canvas.getContext ) {! ! return false;! }!! var ctx = canvas.getContext(2d);!};
  16. 16. ‣‣‣onload = function() {! draw();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas || !canvas.getContext ) {! ! return false;! }!! var ctx = canvas.getContext(2d);!};
  17. 17. ‣‣‣onload = function() {! draw();};function draw(){! var canvas = document.getElementById(example);!! if ( !canvas || !canvas.getContext ) {! ! return false;! }!! var ctx = canvas.getContext(2d);!};
  18. 18.
  19. 19. ‣‣‣‣‣‣‣
  20. 20. ‣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);};
  21. 21. ‣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);};
  22. 22.
  23. 23. ‣‣‣ ‣ ‣ ‣ ‣ ‣‣
  24. 24. ‣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();};
  25. 25. ‣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();};
  26. 26. ‣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();};
  27. 27.
  28. 28. ‣‣arc(x, y, radius, startAngle, endAngle, anticlockwise);‣‣‣‣
  29. 29. ‣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();};
  30. 30. ‣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();};
  31. 31. ‣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();};
  32. 32. ‣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();};
  33. 33. ‣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();};
  34. 34.
  35. 35. ‣ ‣ ‣ ‣‣
  36. 36. ‣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();};
  37. 37. ‣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();};
  38. 38. ‣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();};
  39. 39. ‣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();};
  40. 40.
  41. 41. ‣‣‣‣‣ ‣ ‣ ‣ ‣‣

×