Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
‣‣‣‣‣‣‣
‣‣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動画表現
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Railsチュートリアルの歩き方 (第4版)
Next
Upcoming SlideShare
Railsチュートリアルの歩き方 (第4版)
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

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. ‣‣‣‣‣ ‣ ‣ ‣ ‣‣
  • 00ogo00

    Dec. 20, 2013
  • nk.naoki

    Sep. 11, 2013
  • kanmatsuura

    Nov. 23, 2011

Views

Total views

4,085

On Slideshare

0

From embeds

0

Number of embeds

1,331

Actions

Downloads

24

Shares

0

Comments

0

Likes

3

×