Chapter04 캔버스(2) HTML5 Programming
Contents Chapter04 1. 스타일 지정하기 2. 텍스트 삽입하기 3. 이미지 삽입하기 캔버스(2)
선 스타일 지정하기 Chapter04 선 스타일 지정하기 선을 그리는 데 있어서 선 두께, 선 끝부분 스타일, 선이 꺾이는 부분 스타일, 선 색 등은 특정 속성에 값을 지정함으로써 다양한 변화를 줄 수 있음 캔버스(2)
선 스타일 지정하기 Chapter04 선 스타일 지정하기 캔버스(2)
선 색 지정하기 선 색 지정하기 strokeStyle 속성을 사용함 Chapter04 선 색 지정하기 strokeStyle 속성을 사용함 속성 값은 색상 이름, 색상 코드, RGB, RGBA 형식을 지정할 수 있음 캔버스(2)
선 색 지정하기 Chapter04 선 색 지정하기 캔버스(2)
선의 끝부분 스타일 지정 선의 끝부분 스타일 지정 lineCap 속성을 사용함 Chapter04 선의 끝부분 스타일 지정 lineCap 속성을 사용함 두 개 이상의 lineTo() 메서드를 사용하여 선을 그리는 경우 선이 꺾이는 부분의 모양에 대해서는 lineJoin 속성을 사용 캔버스(2)
선의 끝부분 스타일 지정 Chapter04 선의 끝부분 스타일 지정 캔버스(2)
프로그램 3-2 Chapter04 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 사각형 그리기 </title> 06: <script type="text/javascript"> 07: function rect() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.strokeRect(10,10,200,200); 13: context.fillRect(220,10,200,200); 14: 15: context.fillRect(430,10,200,200); 16: context.clearRect(500,50,100,100); 17: } 18: </script> 19: </head> 20: 21: <body onload="rect();"> 22: <canvas id="canvas" width="700" height="400" 23: style="border:solid 1px #000000"> 24: canvas 사용하기 25: </canvas> 26: </body> 27: </html> 캔버스(2)
프로그램 4-1 Chapter04 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 선 그리기 </title> 06: <script type="text/javascript"> 07: function line() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.beginPath(); 13: context.moveTo(10,50); 14: context.lineTo(200,350); 15: context.lineWidth = 5; 16: context.strokeStyle = 'blue'; 17: context.stroke(); 18: 19: context.beginPath(); 20: context.moveTo(100,50); 21: context.lineTo(300,350); 22: context.lineTo(300,100); 23: context.lineWidth = 10; 24: context.strokeStyle = 'rgb(255,0,0)'; 25: context.stroke(); 캔버스(2)
프로그램 4-1 Chapter04 27: context.beginPath(); 28: context.moveTo(300,50); 29: context.lineTo(500,350); 30: context.lineTo(500,100); 31: context.moveTo(550,50); 32: context.lineTo(550,350); 33: context.lineWidth = 25; 34: context.strokeStyle = '#00FF00'; 35: context.lineCap = 'round'; 36: context.lineJoin = 'butt'; 37: context.stroke(); 38: } 39: </script> 40: </head> 41: 42: <body onload="line();"> 43: <canvas id="canvas" width="700" height="400" 44: style="border:solid 1px #000000"> 45: canvas 사용하기 46: </canvas> 47: </body> 48: </html> 캔버스(2)
채우기 스타일 지정하기 채우기 스타일 지정하기 Chapter04 채우기 스타일 지정하기 색으로 채워져 있는 도형을 그릴 때는 fill() 메서드를 사용하고 채우기 색을 지정할 때는 fillStyle 속성을 사용 도형의 색을 지정할 때는 채우기 색 지정 외에 투명도도 지정할 수 있음 색의 투명도는 globalAlpha 속성을 사용하며 0~1 사이의 값을 지정할 수 있음 캔버스(2)
채우기 스타일 지정하기 Chapter04 채우기 스타일 지정하기 캔버스(2)
채우기 스타일 지정하기 그라데이션 효과 지정하기 Chapter04 그라데이션 효과 지정하기 createLinearGradient() 메서드를 사용하여 선형 그라데이션효과를 줄 수 있으며 createRadialGradient() 메서드를 사용하여 원형 그라데이션 효과를 줄 수 있음 캔버스(2)
채우기 스타일 지정하기 Chapter04 그라데이션 효과 지정하기 캔버스(2)
프로그램 4-2 Chapter04 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 도형 스타일 지정하기 </title> 06: <script type="text/javascript"> 07: function rect() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.beginPath(); 13: context.fillStyle = 'blue'; 14: context.globalAlpha = 0.5; 15: context.fillRect(50,50,200,300); 16: 17: context.beginPath(); 18: var rectstyle = context.createLinearGradient(250,50,200,300); 19: rectstyle.addColorStop(0,"yellow"); 20: rectstyle.addColorStop(0.5,"red"); 21: rectstyle.addColorStop(1,"blue"); 22: context.fillStyle = rectstyle; 23: context.globalAlpha = 1; 24: context.fillRect(250,50,200,300); 25: 26: context.beginPath(); 27: context.lineWidth = 10; 28: context.strokeStyle = 'green'; 29: context.strokeRect(450,50,200,300); 30: context.fillStyle = 'yellow'; 31: context.fillRect(450,50,200,300); 32: } 33: </script> 34: </head> 35: 36: <body onload="rect();"> 37: <canvas id="canvas" width="700" height="400" 38: style="border:solid 1px #000000"> 39: canvas 사용하기 40: </canvas> 41: </body> 42: </html> 캔버스(2)
그림자 스타일 지정하기 Chapter04 그림자 스타일 지정하기 그림자스타일을 지정하는 데는 4가지 속성이 사용됨 캔버스(2)
그림자 스타일 지정하기 Chapter04 그림자 스타일 지정하기 캔버스(2)
프로그램 4-3 Chapter04 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 그림자 스타일 지정하기 </title> 06: <script type="text/javascript"> 07: function shadow() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.beginPath(); 13: context.shadowOffsetX = 10; 14: context.shadowOffsetY = 10; 15: context.shadowColor = 'gray'; 16: context.shadowBlur = 1; 17: context.fillRect(50,50,100,250); 18: 19: context.beginPath(); 20: context.shadowOffsetX = 10; 21: context.shadowOffsetY = 30; 22: context.shadowColor = 'blue'; 23: context.shadowBlur = 2; 24: context.fillRect(250,50,100,250); 25: 26: context.beginPath(); 27: context.shadowOffsetX = 30; 28: context.shadowOffsetY = 10; 29: context.shadowColor = 'green'; 30: context.shadowBlur = 3; 31: context.fillRect(450,50,100,250); 32: } 33: </script> 34: </head> 35: 36: <body onload="shadow();"> 37: <canvas id="canvas" width="700" height="400" 38: style="border:solid 1px #000000"> 39: canvas 사용하기 40: </canvas> 41: </body> 42: </html> 캔버스(2)
도형 합성하기 Chapter04 도형 합성하기 globalCompositeOperation 속성의 값을 지정함으로써 도형을 그린 순서와 상관없이 겹쳐지는 부분에 대한 처리 캔버스(2)
globalCompositeOperation 속성 값 Chapter04 캔버스(2)
프로그램 4-4 Chapter04 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 도형 합성하기 </title> 06: <script type="text/javascript"> 07: function xor() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: for (var i=0; i<50; i++) 13: { 14: var arcstyle = context.createRadialGradient(i*8,i*8,0,i*5,i*5,300); 15: arcstyle.addColorStop(0,"orange"); 16: arcstyle.addColorStop(1,"green"); 17: context.fillStyle = arcstyle; 18: 19: context.arc(i*10,i*10,50,0,2*Math.PI,true); 20: context.fill(); 21: 22: context.globalCompositeOperation = "xor" 23: } 24: } 25: </script> 26: </head> 27: 28: <body onload="xor();"> 29: <canvas id="canvas" width="500" height="500" 30: style="border:solid 1px #000000"> 31: canvas 사용하기 32: </canvas> 33: </body> 34: </html> 캔버스(2)
텍스트 삽입하기 텍스트 삽입하기 텍스트를 삽입하는 메서드는 fill-Text() 메서드와 strokeText() 메서드가 있음 Chapter04 텍스트 삽입하기 텍스트를 삽입하는 메서드는 fill-Text() 메서드와 strokeText() 메서드가 있음 fillText() 메서드와 strokeText() 메서드의 인수 중에는 생략이 가능한 maxWidth 값이 있음. maxWidth 값은 지정한 문자열의 최대 가로폭을 지정한다는 의미를 가지고 있음 캔버스(2)
텍스트 삽입하기 Chapter04 텍스트 삽입하기 캔버스(2)
텍스트 삽입하기 Chapter04 텍스트 삽입하기 textAlign textBaseline 캔버스(2)
텍스트 삽입하기 Chapter04 캔버스(2)
프로그램 4-5 Chapter04 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 텍스트 삽입하기 </title> 06: <script type="text/javascript"> 07: function text() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.beginPath(); 13: var rectstyle = context.createLinearGradient(100,50,600,300); 14: rectstyle.addColorStop(0,"blue"); 15: rectstyle.addColorStop(1,"red"); 16: context.fillStyle = rectstyle; 17: 18: context.shadowOffsetX = 10; 19: context.shadowOffsetY = 10; 20: context.shadowColor = 'gray'; 21: context.shadowBlur = 10; 22: 23: context.font = "bold 50pt 고딕"; 24: context.textAlign = 'left'; 25: context.textBaseline = 'top'; 26: context.fillText("텍스트 삽입하기",100,100); 27: } 28: </script> 29: </head> 30: 31: <body onload="text();"> 32: <canvas id="canvas" width="700" height="400" 33: style="border:solid 1px #000000"> 34: canvas 사용하기 35: </canvas> 36: </body> 37: </html> 캔버스(2)
이미지 삽입하기 이미지 삽입하기 이미지를 삽입하기 위해서는 drawImage() 메서드를 사용 Chapter04 이미지 삽입하기 이미지를 삽입하기 위해서는 drawImage() 메서드를 사용 drawImage() 메서드의 인수로는 이미지의 경로, 삽입 위치, 크기 등을 지정할 수 있으며, 3가지 스타일로 drawImage() 메서드를 사용할 수 있음 캔버스(2)
이미지 삽입하기 Chapter04 이미지 삽입하기 캔버스(2)
이미지 삽입하기 Chapter04 이미지 패턴 삽입하기 도형에 이미지를 삽입하는 패턴을 만들기 위해서는 createPattern() 메서드를 사용 createPattern() 패턴의 인수로는 생성한 이미지의 객체와 반복 형식을 지정하여 사용 캔버스(2)
프로그램 4-6 Chapter04 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 이미지 삽입하기 </title> 06: <script type="text/javascript"> 07: function androidimage() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: var android = new Image(); 13: android.src = 'android.jpg'; 14: 15: context.drawImage(android,10,10); 16: context.drawImage(android,200,10,300,300); 17: context.drawImage(android,10,10,100,100,550,10,100,300); 18: } 19: </script> 20: </head> 21: 22: <body onload="androidimage();"> 23: <canvas id="canvas" width="700" height="400" style="border:solid 1px #000000"> 24: canvas 사용하기 25: </canvas> 26: </body> 27: </html> 캔버스(2)