More Related Content
More from Atsushi Tadokoro (20)
HTML5 Canvas + Javascriptで図形を描く- 千葉商科大 Web動画表現
- 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. ‣
‣
<!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>
- 14. ‣
‣
<!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>
- 15. ‣
<!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>
- 16. ‣
‣
‣
onload = function() {
! draw();
};
function draw(){
! var canvas = document.getElementById('example');
!
! if ( !canvas || !canvas.getContext ) {
! ! return false;
! }
!
! var ctx = canvas.getContext('2d');
!
};
- 17. ‣
‣
‣
onload = function() {
! draw();
};
function draw(){
! var canvas = document.getElementById('example');
!
! if ( !canvas || !canvas.getContext ) {
! ! return false;
! }
!
! var ctx = canvas.getContext('2d');
!
};
- 18. ‣
‣
‣
onload = function() {
! draw();
};
function draw(){
! var canvas = document.getElementById('example');
!
! if ( !canvas || !canvas.getContext ) {
! ! return false;
! }
!
! var ctx = canvas.getContext('2d');
!
};
- 19. ‣
‣
‣
onload = function() {
! draw();
};
function draw(){
! var canvas = document.getElementById('example');
!
! if ( !canvas || !canvas.getContext ) {
! ! return false;
! }
!
! var ctx = canvas.getContext('2d');
!
};
- 20. ‣
‣
‣
onload = function() {
! draw();
};
function draw(){
! var canvas = document.getElementById('example');
!
! if ( !canvas || !canvas.getContext ) {
! ! return false;
! }
!
! var ctx = canvas.getContext('2d');
!
};
- 24. ‣
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. ‣
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);
};
- 29. ‣
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. ‣
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. ‣
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();
};
- 35. ‣
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. ‣
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();
};
- 37. ‣
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();
};
- 38. ‣
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();
};
- 39. ‣
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();
};
- 43. ‣
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. ‣
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. ‣
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();
};
- 46. ‣
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();
};