5-1. html5 graphics

www.javaspecialist.co.kr

Canvas
비트맵 이미지 표현은 어떻게 하는지 알아본다.

Canvas
Color와 Style 설정
Gradient Style 설정
패스와 도형 그리기
Transformations
Context 상태 저장과 복원
스타일 속성 변경
Text 표현
Image 표현
Compositing
toDataURL()
Lab 1 - 시계 그리기
Lab 2 - 캔바스 그림 다운로드하기

1. Canvas
• canvas
– canvas 요소는 사각형 영역을 정의한다.
– 웹페이지에 그림을 그리기 위해 자바스크립트를 사용한다.
– canvas 요소는 선, 원, 사각형 등 도형과, 문자출력, 이미지출력 등 기능을 가지고 있다.
• Canvas 요소 생성
– HTML5 페이지에 id, width, height 속성을 부여하여 canvas 요소를 선언한다.
– <canvas id="myCanvas" width="200" height="100"></canvas>
• JavaScript에서 그리기
– canvas 요소는 스스로 그리는 능력이 없음
– 그리는 기능은 자바스크립트를 사용해야 함
– 캔바스에 그림을 그리기 위해 2D 컨텍스트 객체를 얻어야 함
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
– 좌표는 왼쪽 상단이 (0,0) 이다.
(0,0)
(150,75)

2. Color와 Style 설정
속성 값 설명
fillStyle color/style 채워지는 도형의 색을 지정한다. 기본 값은 black이다.
strokeStyle color/style 도형의 선 색을 지정한다. 기본 값은 black이다.
lineCap
butt
round
square
선 끝의 스타일을 지정한다. 기본 값은 butt이다.
lineJoin
bevel
round
miter
선 코너의 스타일을 지정한다. 기본 값은 miter이다.
lineWidth number 선의 굵기를 지정한다. 기본 값은 1
miterLimit number
선그릴 때 코너의 limit 최대 크기를 지정한다. 기본 값은 10이
다.
shadowColor color 코너의 그림자 색을 지정한다. 기본 값은 black이다.
shadowOffsetX number 그림자의 수평 방향 거리를 지정한다. 기본 값은 0이다.
shadowOffsetY number 그림자의 수직 방향 거리를 지정한다. 기본 값은 0이다.
shadowBlur number blurring 효과를 지정한다. 기본 값은 0이다.

3. Gradient Style 설정
메서드 설명
createLinearGradient(x0,y0,x1,y1)
선형 그라데이션 객체 생성, strokeStyle 또는 fillStyle 속성의
값으로 사용될 수 있다.
createPattern(obj,pattern)
fillStyle 이나 strokeStyle 속성에 사용될 이미지로부터 패턴을
생성한다.
createRadialGradient(x0,y0,r0,x1,y1,r1)
strokeStyle 또는 fillStyle 속성의 값으로 사용될 수 있는 원형
그라데이션 객체를 생성한다.
addColorStop(position,color) 그라데이션의 위치와 색을 지정한다.
drawCustomFocusRing(element)
주어진 요소에 포커스가 되면 플랫폼 규칙에 따라 현재 패스주
위에 포커스 링을 그린다.
drawSystemFocusRing(element) 시스템 포커스링을 나타낸다.

4. 패스와 도형 그리기 (1/5)
• 캔바스에 무언가 그려지기 전에 beginPath() 메서드에 의해 패스가 먼저 시작되어야 하며, 시
작 위치의 이동은 moveTo() 메서드를 이용함
메서드 설명
fillRect(x,y,w,h) fillStyle 속성의 color/style을 사용해 채워진 사각형을 그린다.
strokeRect(x,y,w,h) strokeStyle 속성의 값에 따라 사각형을 그린다.
clearRect(x,y,w,h) 지정된 영역을 지운다. 영역 내의 모든 픽셀들은 지워진다.
beginPath() 새로운 패스를 시작하거나, 현재 패스를 지운다.
moveTo(x,y) 지정된 위치로 이동한다.
closePath() 패스를 닫는다.
lineTo(x,y) 패스에서 가장 마지막 주어진 위치부터 직선을 생성한다.
rect(x,y,w,h) 현재 패스에 사각형을 생성한다.
fill() 선택한 색으로 현재 패스를 채운다. 디폴트는 검은색이다.
stroke() 패스 메서드들을 이용해 스트로크/패스 정보를 생성한다.
clip() 지정된 패스를 기반으로 클립 영역을 생성한다. 캔바스에서 클립 영역만 보인다.
quadraticCurveTo(cpx,cpy,x,y) 현재 패스에 이차곡선을 생성한다.
bezierCurveTo(cpx,cpy,cpx,cpy,x,y) 현재 패스에 베지어 곡선을 생성한다.
arc(x,y,r,sAngle,eAngle,aClockwise) 현재 패스에 호 또는 원을 생성한다.
arcTo(x1,y1,x2,y2,radius)
두 점을 기반으로 원을 그린다. 이때 원은 두 점을 이용해서 만들어지는 사각형의
내접원이 생성된다.
isPointInPath(x,y) 지정된 point가 패스 안에 포함될 때 true를 반환한다.

4. 패스와 도형 그리기 (2/5) - 선 그리기
• Sample Code – Line
– <!DOCTYPE HTML>
– <html>
– <body>
– <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
– Your browser does not support the canvas element.
– </canvas>
– <script type="text/javascript">
– var c=document.getElementById("myCanvas");
– var ctx=c.getContext("2d");
– ctx.moveTo(10,10);
– ctx.lineTo(150,50);
– ctx.lineTo(10,50);
– ctx.stroke();
– </script>
– </body>
– </html>

4. 패스와 도형 그리기 (3/5) - 원 그리기
• Sample Code – Circle
– <!DOCTYPE HTML>
– <html>
– <body>
– </canvas>
– ctx.fillStyle="#FF0000";
– ctx.beginPath();
– ctx.arc(70,18,15,0,Math.PI*2,true);
– ctx.closePath();
– ctx.fill();
– </script>
– </body>
– </html>

4. 패스와 도형 그리기 (4/5) - 베지어 곡선
• ctx.beginPath();
• ctx.strokeStyle = "#000000";
• ctx.moveTo(70,145);
• ctx.bezierCurveTo(55, 55, 175, 55, 270, 145);
• ctx.stroke();
• ctx.closePath();

4. 패스와 도형 그리기 (5/5) - 그라데이션
• createLinearGradient() 메서드와 createRadialGradient() 메서드는 그라데이션스타일을 지정할 때
사용
• 이 메서드의 반환 객체는 strokeStyle 또는 fillStyle 속성에 대한 값으로 사용
• 그라데이션 객체의 addColorStop() 메서드는 그라데이션의 위치와 색상을 지정
– <!DOCTYPE HTML>
– <html>
– <body>
– </canvas>
– var grd=ctx.createLinearGradient(0,0,175,50);
– grd.addColorStop(0,"#FF0000");
– grd.addColorStop(1,"#00FF00");
– ctx.fillStyle=grd;
– ctx.fillRect(0,0,175,50);
– </script>
– </body>
– </html>

5. Transformations
• 변환 메서드를 이용하여 크기를 조절하거나 회전
• 회전 또는 이동의 중심은 (0, 0)
메서드 설명
scale(x,y) x, y 매개 변수에 따라 크기를 변환한다.
rotate(angle) 주어진 각도로 회전시킨다.
translate(x,y) 수평, 수직 방향으로 이동시킨다.
transform(a,b,c,d,e,f)
matrix에 기초하여 드로잉을 변경시킨다. scale, rotate, translate를
한꺼번에 할 수 있는 메서드이다. 인자의 순서는 scale-x, skew-x,
skew-y, scale-y, translate-x, translate-y이다.
setTransform(a,b,c,d,e,f)
현재 변환 영역을 없애고, matrix 에 기초하여 드로잉을 변경시킨
다.

6. Context 상태 저장과 복원
• save()
– 컨텍스트의 상태 저장
• 좌표변환 매트릭스, 클리핑영역, strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap,
lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor,
globalCompositeOperation, font, textAlign, textBaseline
– 캔버스에 그려진 그래픽이나 패스(서브패스)는 저장대상이 아님
• restore()
– 컨텍스트의 상태를 복원
– save() 로 저장한 상태를 스택의 탑에서부터 복원함
• 예)
– </canvas>
– ctx.font = '10pt 굴림';
– ctx.fillText("안녕하세요-10pt", 10, 10);
– ctx.save();
– ctx.font = '20pt 굴림';
– ctx.fillText("안녕하세요-20pt", 10, 60);
– ctx.save();
– ctx.font= '30pt 굴림';
– ctx.restore();
– //ctx.restore();
– ctx.fillText("안녕하세요-?", 10, 110);
– </script>
10pt 굴림
20pt 굴림
30pt 굴림
ctx.save()
ctx.save()

7. 패스 변경
• beginPath()로 패스 시작
– 패스시작, 이전 패스는 리셋됨
• 그리기
– moveTo(x, y)
– lineTo(x, y)
– qeadraticCurveTo(cpx, cpy, x, y)
– bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
– arc(x, y, radius, startAngle, endAngle, anticlockwise)
– rect(x, y, w, h)
• stroke()나 fill()을 이용 그래픽을 화면에 표시
– stroke
• 패스를 선으로 표현
• strokeStyle 속성으로 지정
– fill
• 패스 내부를 채움
• fillStyle 속성 사용
– clip
• 내부 클리핑 영역 지정
• 도중에 그래픽을 화면에 표시하고 스타일등 속성을 변경하기 위해서는 path를 다시 시작해
야 함
– beginPath()
– closePath()

8. Text 표현 (1/2) - 속성과 메서드
속성 값 설명
font fontproperties 캔바스에 쓰기 위해 사용되는 글꼴 속성을 지정한다.
textAlign
start
end
left
right
center
텍스트의 정렬 상태를 지정한다. 기본 값은 "start"이다.
textBaseline
alphabetic
bottom
hanging
ideographic
middle
top
텍스트가 표시될 때 베이스라인(수직 정렬)을 지정한다. 기
본 값은 "alphabetic"이다.
메서드 설명
fillText(text,x,y,maxWidth)
캔바스에 텍스트를 그린다. 그리고 fillStyle에 지정된 색을 텍스트
의 내부를 채운다.
strokeText(text,x,y,maxWidth)
캔바스에 strokeStyle 에 지정한 색으로 텍스트를 그린다. 텍스트
의 내부는 채워지지 않는다.
measureText(text).width 주어진 텍스트 문자열을 측정하여 픽셀의 넓이를 반환한다.

8. Text 표현 (2/2) - textBaseline 속성
hanging baseline
middle
alphabetic baseline
ideographic baseline
top of em square
bottom of em square
top of bounding box
bottom of bounding box

9. Image 표현을 위한 속성과 메서드
• var img = new Image();
• img.src = "sample.jpg";
• ctx.drawImage(img, 0, 0);
속성 값 설명
width number 이미지 데이터 객체의 넓이를 지정한다.
height number 이미지 데이터 객체의 높이를 지정한다.
data array
이미지 데이터이다. 이미지가 가지고 있는 모든 픽셀이
RGBA순서로 저장되어 있는 1차원 배열이다.
메서드 설명
drawImage(img,x,y) 캔바스에 그릴 때 사진을 사용한다.
createImageData(w,h)
createImageData(imgdat)
빈 이미지 데이터 객체를 생성한다.
getImageData(x,y,w,h)
캔바스로부터 데이터를 포함하는 이미지 데이터 객체를
생성한다.
putImageData(imgdat,dx,dy,x,y,w,h) 캔바스에 이미지 데이터 객체를 그린다.

10. Compositing - 두 개 이상의 도형이 겹칠 때
속성 값 설명
globalAlpha number 그림의 투명도를 지정한다.
globalCompositeOperation
source-atop
source-in
source-out
source-over
destination-atop
destination-in
destination-out
destination-over
lighter
copy
xor
도형과 그림이 캔바스에 배치되는
방법을 지정한다.

11. toDataURL()
• 캔바스에 그려진 내용을 URL 문자열로 반환해 준다.
• canvas.toDataURL(type)
• canvas.toDataURL(type, quality)
– 품질 값은 0.0 ~ 1.0
– type은 png 파일의 경우 image/png, jpeg 파일의 경우 image/jpg로 지정
• Canvas 내용을 문자열로 얻을 수 있다는 것은 웹에서 다양한 시나리오를 구현할 수 있다는
의미
 캔바스 내용을 이미지로 변환하여 로컬 컴퓨터
에 저장
 캔바스 내용을 서버로 업로드 하여 다른 사람과
공유하거나 관리
 캔바스 내용을 쿠키나 localStorage 등에 저장
하여 계속 사용
 커뮤니케이션 API를 사용해 페이지 사이에 캔
바스 내용을 교환
 이렇게 생성한 이미지는 일반 이미지 파일과는
달리 브라우저에 캐시 되지 않기 때문에 쇼핑몰
이미지 리스트와 같은 많은 이미지를 서버에서
불러와 캐시 되는 시나리오에는 적합하지 않을
수 있다.

Lab 1
• 다음과 그림처럼 시계를 구현해 보자.
• 힌트
– 초를 나타내는 코드를 참고하라.
– var hours = new Date().getHours();
– var minutes = new Date().getMinutes();
• 그리고 시간이 된다면…
– 배경에 예쁜 그림 추가.
– 시침 분침 초침의 두께와 길이, 색을 다르게
보이 수정.
– 시계를 오른쪽 상단에 마우스 커서를 올려 놓
을 때 보이게 하며, 평상시에는 투명도를 0.1
로 지정해서 눈에 잘 띄지 않게 하고, 마우스
를 시계위에 올려 놓으면 투명도를 1로해서
눈에 잘 띄도록 이벤트 추가.

Lab 1 (Canvas/clock2/clock.html)

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="EUC-KR">
5. <title>Clock</title>
6. <link rel="stylesheet" href="layout.css" media="screen" >
7. <script src="clock.js" defer></script>
8. </head>
9. <body>
10. <canvas id="clockCanvas" width="300" height="300"></canvas>
11. </body>
12. </html>
/* layout.css */
1. #clockCanvas {
2. position: fixed;
3. top: 0; right: 0;
4. width: 300px; height: 300px;
5. opacity: 0.1;
6. border:1px solid #c3c3c3;
7. }
8. #clockCanvas:hover {
9. opacity: 1;
10. }

Lab 1
1. (function() {
2. var canvas = document.getElementById("clockCanvas");
3. var ctx = canvas.getContext("2d");
4. var centerX = centerY = 150;
5.
6. ctx.lineCap = "round";
7. setInterval(clock, 10);
8.
9. function clock() {
10. ctx.clearRect(0, 0, 300, 300);
11.
12. //테두리
13. var clockBorder = 15;
14. var radgrad = ctx.createRadialGradient(150,150,100+clockBorder,150,150,100);
15. radgrad.addColorStop(0, '#554400');
16. radgrad.addColorStop(0.5, '#FFEE88');
17. radgrad.addColorStop(0.99, '#442200');
18. radgrad.addColorStop(0.99, '#FFFFAA');
19.
20. ctx.beginPath();
21. ctx.fillStyle = radgrad;
22. ctx.arc(centerX,centerY,100+clockBorder, 0, Math.PI*2, true);
23. ctx.fill();
24. ctx.closePath();
25.

Lab 1
26. //숫자판
27. for(var i=0; i<12; i++) {
29. ctx.fillStyle = "#000000";
30.
31. var a = (360/12) * i * Math.PI/180;
32. var x = 150+Math.sin(a)*90;
33. var y = 150-Math.cos(a)*90;
34. ctx.lineWidth = 1;
35. ctx.arc(x, y, 3, 0, Math.PI*2, true);
36. ctx.fill();
38. }
39.
40. //SECONDS
42. ctx.moveTo(150,150);
43. var seconds = (new Date().getTime() / 1000) % 60;//new Date().getSeconds();
44. var angle = (360/60) * seconds * Math.PI/180; //radian 값
45. ctx.strokeStyle = "#ff0000"; // line color
47. ctx.lineTo(150+Math.sin(angle)*80, 150-Math.cos(angle)*80);
48. ctx.stroke();
50.

Lab 1
51. //MINUTE
52. var minutes = new Date().getMinutes();
55. ctx.strokeStyle = "#000000"; // line color
56. ctx.moveTo(150,150);
57. angle = (360/60) * minutes * Math.PI/180; //radian 값
59. ctx.stroke();
61.
62. //HOUR
63. var hours = new Date().getHours();
66. ctx.moveTo(150,150);
67. angle = (360/12) * hours * Math.PI/180; //radian 값
69. ctx.stroke();
71. }
72. })();

Lab 2
• 윈도우의 그림판에 그려진 그림을 이미지로 다운로드 받을 수 있는 기능을 추가하자.
• 제공된 파일
– simplepaint.html
– 이미지파일
– css 파일
• toImage 버튼을 추가하고 버튼을 클릭했을 때 왼쪽에 그려진 캔바스의 그림을 다운로드 받
을 수 있도록 오른쪽 <div>영역에 이미지 요소로 추가해야 한다.
• 아래 그림에서 왼쪽은 캔바스이고 오른쪽은 img 요소임
• 힌트
– toDataURL() 이용
– img 요소의 src 속성에 대입

Lab 2
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Canvas</title>
5. <link rel="stylesheet" type="text/css" href="./css/canvas.css">
6. <script type="text/javascript">
7. var eCanvas = null;
8. var lColor = "#000000";
9. var ctx = null;
10. var lPainting = false;
11. var lX1 = -1;
12. var lY1 = -1;
13.
14. function mouseDownLsnr( aEvent ) {
15. aEvent.preventDefault();
16. lPainting = true;
17. lX1 = aEvent.clientX - eCanvas.offsetLeft;
18. lY1 = aEvent.clientY - eCanvas.offsetTop;
19. }
20.
21. function mouseMoveLsnr( aEvent ) {
23.
24. if( lPainting ) {
25. var lX2 = aEvent.clientX - eCanvas.offsetLeft;
26. var lY2 = aEvent.clientY - eCanvas.offsetTop;
27. if( ctx != null ) {
29. ctx.moveTo( lX1, lY1 );
30. ctx.strokeStyle = lColor;
31. ctx.lineTo( lX2, lY2 );
32. ctx.stroke();
34. }

Lab 2
35.
36. lX1 = lX2;
37. lY1 = lY2;
38. }
39. }
40.
41. function mouseUpLsnr( aEvent ) {
43.
44. if( lPainting ) {
45. lX2 = aEvent.clientX - eCanvas.offsetLeft;
46. lY2 = aEvent.clientY - eCanvas.offsetTop;
47. if( ctx != null ) {
49. ctx.moveTo( lX1, lY1 );
50. ctx.strokeStyle = lColor;
51. ctx.lineTo( lX2, lY2 );
52. ctx.stroke();
54. }
55. lPainting = false;
56. }
57. }
58.
59. function mouseOutLsnr( aEvent ) {
60. mouseUpLsnr( aEvent );
61. }
62.
63. function selectColor(aColor ) {
64. lColor = aColor;
65. document.getElementById( "spanSettings" ).style.borderColor = lColor;
66. }
67.

Lab 2
68. function doClear() {
69. if( eCanvas != null ) {
70. var lW = eCanvas.getAttribute( "width" );
71. var lH = eCanvas.getAttribute( "height" );
72. ctx.clearRect( 0, 0, lW, lH );
73. }
74. }
75.
76. var lImgIdx = 0;
77. var lImages = new Array();
78.
79. lImages[ 0 ] = new Image();
82.
83. lImages[ 0 ].src = "1.jpg";
86.
87. function paint() {
88. var lCanvas = document.getElementById( "canvas" );
89. lCanvas.clear = true;
90. var lContext = lCanvas.getContext( "2d" );
91.
92. lContext.drawImage( lImages[ lImgIdx ], 0, 0 );
93. if ( lImgIdx >= 2 ) {
94. lImgIdx = 0;
95. } else {
96. lImgIdx++;
97. }
98. }
99.
100.

Lab 2
101. function initPage() {
102. eCanvas = document.getElementById( "canvas" );
103. ctx = eCanvas.getContext( "2d" );
104.
105. eCanvas.addEventListener( "mousedown", mouseDownLsnr, false );
106. eCanvas.addEventListener( "mousemove", mouseMoveLsnr, false );
107. eCanvas.addEventListener( "mouseup", mouseUpLsnr, false );
108. eCanvas.addEventListener( "mouseout", mouseOutLsnr, false );
109.
110. }
111. function convertImage(){
112. var image = new Image();
113. var myImage = document.getElementById('myImage');
114. myImage.src = canvas.toDataURL();
115. }
116. </script>
117. </head>
118.
119. <body onload="initPage()">
120. <div> 
121. <p>
122. <input class="sbtnDlg" id="sbtnClear" type="button" value="Clear" onclick="doClear();"
123. title="Clears the current canvas."> 
124. <input class="sbtnDlg" id="sbtnPaint" type="button" value="Paint" onclick="paint();"
125. title="Paints some images on the canvas."> 
126. <input class="sbtnDlg" id="sbtnPaint" type="button" value="toImage" onclick="convertImage();"
127. title="Paints some images on the canvas."> 
128. </p>
129.
130. <canvas id="canvas" width="240" height="240"
131. style="width:240px; height:240px; overflow:hidden; border:1px solid gray; cursor:crosshair;
float:left" >
132. </canvas>

Lab 2
133.
134. <div id="spanSettings" style="border:1px solid gray; position:relative;
135. top: 0px; left: 5px; width:20px; height:157px; margin-bottom:80px; overflow:hidden">
136. <table border="0" cellspacing="2" cellpadding="1">
137. <colgroup><col width="20px"></colgroup>
138. <tr><td style="cursor: pointer; background-color: #000000"
onclick="selectColor('#000000');"
139. title="black"> </td></tr>
140. <tr><td style="cursor: pointer; background-color: #c0c0c0"
onclick="selectColor('#c0c0c0');"
141. title="gray"> </td></tr>
142. <tr><td style="cursor: pointer; background-color: #ff0000"
onclick="selectColor('#ff0000');"
143. title="red"> </td></tr>
144. <tr><td style="cursor: pointer; background-color: #ff00ff"
onclick="selectColor('#ff00ff');"
145. title="magenta"> </td></tr>
146. <tr><td style="cursor: pointer; background-color: #008000"
onclick="selectColor('#008000');"
147. title="green"> </td></tr>
148. <tr><td style="cursor: pointer; background-color: #0000ff"
onclick="selectColor('#0000ff');"
149. title="blue"> </td></tr>
150. <tr><td style="cursor: pointer; background-color: #ff9900"
onclick="selectColor('#ff9900');"
151. title="cyan"> </td></tr>
152. </table>
153. </div>
154. <div id="image" style="border:1px solid red; position:absolute; top:55px; left:300px;
width:240px; height:240px;">
155. <img id="myImage">
156. </div>
157. </div>
158. </body>
159. </html>

5-1. html5 graphics

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 5-1. html5 graphics

Similar to 5-1. html5 graphics (20)

More from JinKyoungHeo

More from JinKyoungHeo (6)

5-1. html5 graphics