HTML5-11강 캔버스2 - 드로잉 확장

Size: px
Start display at page:

Download "HTML5-11강 캔버스2 - 드로잉 확장"

Transcription

1 표준화문서를기반으로하는지침서 속이깊은 HTML5 & CSS3 김명진지음 11 강 캔버스 Part-2 - 드로잉확장

2 학습목표 앞장에서캔버스에서드로잉작업에필요한기본적인내용들을살펴보았다. 이번장에서는기본드로잉기능에원및원호를그리는방법, 베지에곡선을그리는방법을학습한다. 그리고다양한색상으로도형을채울수있는그라데이션스타일, 와인딩에따른도형의다양한채우기스타일, 패턴에의한스타일, 그리고그림자스타일에대하여학습하도록한다. Section 1 원그리기 2 베지에곡선 3

3 01 원그리기 원 / 원호그리기 arc() 메서드 context.arc(x, y, radius, startangle, endangle [, anticlockwise ] ) 호를그린다. 3

4 01 원그리기 원 / 원호그리기 arc() 메서드 context.arc(x, y, radius, startangle, endangle [, anticlockwise ] ) 호를그린다. 예제 Canvas_11-01_Arc.html Script for (var i = 0; i < 2; i++) { for (var j = 0; j < 3; j++) { var x = 75 + j * 125; // 좌표 X var y = 75 + i * 125; // 좌표 Y var radius = 50; // 반지름 var startangle = 0; // 시작각도 var endangle = Math.PI + (Math.PI * j) / 2; // 종료각도 var anticlockwise = i % 2 == 0? false : true; // 그리는방향 } } context.linewidth = 4; context.arc(x, y, radius, startangle, endangle, anticlockwise); // 호를그린다 context.stroke(); 4

5 01 원그리기 원 / 원호그리기 arc() 메서드 context.arc(x, y, radius, startangle, endangle [, anticlockwise ] ) 호를그린다. 예제살펴보기 예제 Canvas_11-01_Arc.html Script for (var i = 0; i < 2; i++) { for (var j = 0; j < 3; j++) { var x = 75 + j * 125; // 좌표 X var y = 75 + i * 125; // 좌표 Y var radius = 50; // 반지름 var startangle = 0; // 시작각도 var endangle = Math.PI + (Math.PI * j) / 2; // 종료각도 var anticlockwise = i % 2 == 0? false : true; // 그리는방향 } } context.linewidth = 4; context.arc(x, y, radius, startangle, endangle, anticlockwise); // 호를그린다 context.stroke(); 5

6 01 원그리기 원 / 원호그리기 arc() 메서드 실습 Canvas_Study11-01_Arc.html Script // 첫번째부채꼴을그린다 context.moveto(120,120); context.arc(120,120,100,0,270*math.pi/180, true); context.closepath(); context.stroke(); // 두번째원의첫번째호를그린다 context.arc(350,120,100,90*math.pi/180,360*math.pi/180,false); context.stroke(); // 두번째원의두번째채워진호를그린다 context.arc(350,120,100,90*math.pi/180,360*math.pi/180,true); context.fill(); // 세번째원의첫번째부채꼴을그린다 context.moveto(570,120); context.arc(570,120,100,90*math.pi/180,360*math.pi/180,false); context.closepath(); context.stroke(); // 세번째원의두번째채워진부채꼴을그린다 context.moveto(580,130); context.arc(580,130,100,90*math.pi/180,360*math.pi/180,true); context.closepath(); context.fill(); 6

7 01 원그리기 직선과연결된원호그리기 arcto() 메서드 context.arcto(x1, y1, x2, y2, radius) 직선과연결된호를그린다. 현재경로에하나의지점이추가되고그지점은직선에의해직전지점에연결된다. 그리고현재경로에두번째지점이추가되고그지점은속성이인수에지정된호에의해직전지점에연결된다. 주어진반지름의크기가음수인경우, indexsizeerror 예외오류가발생한다. 7

8 01 원그리기 직선과연결된원호그리기 arcto() 메서드 arcto() vs. arc() 8

9 01 원그리기 직선과연결된원호그리기 arcto() 메서드 9

10 01 원그리기 직선과연결된원호그리기 arcto() 메서드 실습 Canvas_Study11-02_RoundRect.html Script function roundrect(context, x, y, width, height, radius) { if(width < 1) return; context.moveto(x + radius, y); // 오른쪽상단모서리를그리기위한시작점으로이동 context.arcto((x+width), y, (x+width), (y+height), radius); // 오른쪽상단모서리 context.arcto((x+width), (y+height), x, (y+height), radius); // 오른쪽하단모서리 context.arcto(x, (y+height), x, y, radius); // 왼쪽하단모서리 context.arcto(x, y, (x+radius), y, radius); // 왼쪽상단모서리 context.stroke(); } function draw() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); } roundrect(context, 50, 50, 100, 100, 10); roundrect(context, 200, 50, 100, 100, 20); roundrect(context, 350, 50, 100, 100, 30); roundrect(context, 500, 50, 100, 100, 40); 10

11 02 베지에곡선 2 차베지에곡선 베지에곡선은 n 개의점으로부터얻어지는 (n-1) 차곡선을의미 베지에곡선은 2 차곡선과 3 차 ( 다항 ) 곡선으로이루어져있다. 2 차베지에곡선은 2 개의기준점 ( 시작점과종료점 ) 과한개의제어점을필요로한다. context.quadraticcurveto(cpx, cpy, endx, endy) 2 차베지어곡선을그린다. 주어진제어포인트와 2 차 (quadratic) 베지어곡선에연결되는현재의서브패스로지정된포인트를추가한다. 11

12 02 베지에곡선 2 차베지에곡선 Script 예제 Canvas_11-02_quadraticCurve.html var X = 50, Y = 280; // 시작점의위치지정 var cpx = 100, cpy = 50; // 제어점의위치지정 var endx = 400, endy = 260; // 종료점의위치지정 // 2 차베지어곡선을그린다. context.linewidth = 10; // 곡선두께지정 context.strokestyle = "rgba(255, 0, 0, 0.5)"; // 선색지정 context.moveto(x, Y); // 시작점으로이동 context.quadraticcurveto(cpx, cpy, endx, endy); //2 차베지에곡선을그린다 context.stroke(); // 가상의보조선을그린다. context.linewidth = 1; // 보조선두께지정 context.strokestyle = "rgba(0, 0, 0, 0.5)"; context.moveto(x, Y); // 시작점으로이동 context.lineto(cpx, cpy); // 제어점까지연결선 context.lineto(endx, endy); // 종료점까지연결선 context.stroke(); // 시작점, 보조점, 종료점을표시한다 context.fillrect(x-3, Y-3, 6, 6); // 시작점표시 context.fillrect(cpx-3, cpy-3, 6, 6); // 제어점표시 context.fillrect(endx-3, endy-3, 6, 6); // 제어점표시 12

13 02 베지에곡선 2 차베지에곡선 실습 Canvas_Study11-03_quadraticCurve.html Script context.linewidth = 5.0; context.strokestyle = "red" context.moveto(175, 25); // 시작점을중앙상단으로옮긴다 context.quadraticcurveto(325, 25, 325, 100); // 제어점 cp1 과종료점 (325,100) context.quadraticcurveto(325, 175, 175, 175); // 제어점 cp2 와종료점 (175,175) context.quadraticcurveto(25, 175, 25, 100); // 제어점 cp3 과종료점 (25,100) context.quadraticcurveto(25, 25, 175, 25); // 제어점 cp4 과종료점 (25,25) context.stroke(); 13

14 02 베지에곡선 3 차베지에곡선 베지에곡선은 n 개의점으로부터얻어지는 (n-1) 차곡선을의미 3 차베지에곡선은 2 개의기준점 ( 시작점, 종료점 ) 과 2 개의제어점으로정의된다. 4 개의점에서중간점 3 개를구하고, 중간점 3 개에서의중간점을 2 개를다시구한다. 마지막으로중간점 2 개에서마지막중간점을구하는식 context.beziercurveto(cp1x, cp1y, cp2x, cp2y, endx, endy) 3 차베지에곡선을그린다. 직선에의한이전포인트와연결된현재의서브패스로지정된포인트를추가한다. 14

15 02 베지에곡선 3 차베지에곡선 예제 Canvas_11-02_bezierCurve1.html Script var X = 100, Y = 320; // 시작점의위치지정 var cp1x = 60, cp1y = 50; // 제어점1의위치지정 var cp2x = 320, cp2y = 50; // 제어점1의위치지정 var endx = 400, endy = 280; // 종료점의위치지정 // 3차베지어곡선을그린다. context.linewidth = 10; // 곡선두께지정 context.strokestyle = "rgba(255, 0, 0, 0.5)"; // 선색지정 context.moveto(x, Y); // 시작점으로이동 context.beziercurveto(cp1x, cp1y, cp2x, cp2y, endx, endy); context.stroke(); // 가상의보조선과각지점을그린다. context.linewidth = 1; // 보조선두께지정 context.strokestyle = "rgba(0, 0, 0, 0.5)"; context.moveto(x, Y); context.lineto(cp1x, cp1y); context.lineto(cp2x, cp2y); context.lineto(endx, endy); context.stroke(); context.fillrect(x-3, Y-3, 6, 6); // 시작점의표시 context.fillrect(cp1x-3, cp1y-3, 6, 6); // 제어점1의표시 context.fillrect(cp2x-3, cp2y-3, 6, 6); // 제어점2의표시 context.fillrect(endx-3, endy-3, 6, 6); // 종료점의표시 15

16 02 베지에곡선 3 차베지에곡선 예제 Canvas_11-02_bezierCurve2.html Script var X = 100, Y = 320; // 시작점의위치지정 var cp1x = 60, cp1y = 50; // 제어점1의위치지정 var cp2x = 320, cp2y = 50; // 제어점2의위치지정 var endx = 400, endy = 280; // 종료점의위치지정 16

17 채우기스타일 (Fill Style) 지정 context.fillstyle [ = value ] 도형을채우기위해사용되는현재의채우기스타일을반환한다. fillstyle 속성은도형내부에사용하는색상이나스타일을나타내는것으로지정한값 (value) 으로변경할수있다. 스타일은 CSS 색상을포함하는문자열이나 CanvasGradient 또는 CanvasPattern 객체가될수있으며, 잘못된값은무시된다. context.globalalpha [= value] 렌더링처리에적용하는현재의투명도값을반환한다. 전역 (global) 알파 (Alpha) 값을설정하는속성으로, 0( 완전투명 ) ~ 1.0( 완전불투명 ) 사이의값을지정할수있으며기본값은 1.0이다. rgba() 또는 hsla() 를이용하여투명도를지정할수있지만, 이속성을사용하면, 이후에계속해서그리게되는모든도형과이미지에이속성에지정된값이적용된다. 17

18 채우기스타일 (Fill Style) 지정 예제 Canvas_11-03_fillStyle.html Script context.linewidth = 10; context.strokestyle = "blue" polygon(context,125, 125, 100, 4, -Math.PI/2); // 사각형을그린다 context.fillstyle="rgba(227,11,93,0.75)"; context.fill(); context.stroke(); context.strokestyle = "green" polygon(context,350, 125, 100, 5, -Math.PI/2); // 오각형을그린다 context.fillstyle="rgba(51,128,255,0.75)"; context.fill(); context.stroke(); context.strokestyle = "red" polygon(context,550, 125, 100, 6, -Math.PI/2); // 육각형을그린다 context.fillstyle="rgba(11,227,93,0.75)"; context.fill(); context.stroke(); context.strokestyle = "black" polygon(context,750, 125, 100, 8, -Math.PI/2); // 팔각형을그린다 context.fillstyle="rgba(227,11,93,0.75)"; context.fill(); context.stroke(); 18

19 채우기스타일 (Fill Style) 지정 예제 Canvas_11-03_fillStyle.html Script context.linewidth = 10; //context.globalalpha = 1; // 투명도를완전불투명하게지정 context.globalalpha = 0.5; // 투명도를 50% 투명하게지정 context.strokestyle = "blue" polygon(context,125, 125, 100, 4, -Math.PI/2); // 사각형을그린다 context.fillstyle="rgb(227,11,93)"; context.fill(); context.stroke(); 이하생략 ( 앞의예제참고 ) globalalpha = 1.0 globalalpha =

20 와인딩규칙 (Winding Rule) 현재패스가자기자신을통과하거나현재패스와교차하는여러개의서브패스가있을경우에, fill() 메서드는내부를어떻게채울까? 20

21 와인딩규칙 (Winding Rule) 컴퓨터그래픽에서의와인딩방식 21

22 와인딩규칙 (Winding Rule) 짝 - 홀와인딩 (even-odd winding) 어떤한지점이패스내부에있는지를확인하려면, 다음그림과같이다시한번그지점을통해서선을그려보면알수있다. 선을통과할때마다교차횟수를누적한다. 누적된교차횟수가짝수라면패스외부라고판단하고채우지않는다. 그러나, 교차횟수가홀수이면패스내부라고판단하고지정한스타일로채우게된다. 22

23 와인딩규칙 (Winding Rule) 넌제로와인딩 (non-zero winding) 패스의각부분에대한드로잉을하는방향 ( 시계방향및시계반대방향 ) 에의존하는방법 모든시계방향회전의경우에는 1 씩감소시키고, 모든시계반대방향회전의경우에는 1 씩증가시킨다. 마지막으로계산된카운터가 0 이아니면, 해당영역은패스안에존재한다고판단하여브라우저에서는 fill() 메서드를호출해서해당영역의내부를채운다. 그러나, 마지막카운터가 0 이라면해당영역은패스안에존재하지않는것으로판단하여브라우저에서는해당영역내부를채우지않는다. 23

24 와인딩규칙 (Winding Rule) 넌제로와인딩 (non-zero winding) 왼쪽그림 지점 1. Total = 1, 따라서내부라고판단하여내부를채운다. 지점 2. Total = 1 1( 시계방향 ) = 0, 따라서외부라고판단하여내부를채우지않는다. 지점 3. Total = 1 1( 시계방향 ) 1( 시계방향 ) = -1, 따라서내부라고판단하여내부를채운다. 오른쪽그림 지점 1. Total = 1, 따라서내부라고판단하여내부를채운다. 지점 2. Total = 1 + 1( 시계반대방향 ) = 2, 따라서내부라고판단하여내부를채운다. 지점 3. Total = 1 + 1( 시계반대방향 ) + 1( 시계반대방향 ) = 3, 따라서내부라고판단하여내부를채운다. 24

25 와인딩규칙 (Winding Rule) 수정된다각형그리기 //function polygon( 컨텍스트, 좌표 (x, y), 반지름, 면의수, 시작각도, 그리는방향 ) function polygon(context, x, y, radius, sides, startangle, anticlockwise) { 수정 if (sides < 3) return; //3 각형이하는그리지않도록한다. var degree = (Math.PI * 2)/sides; // 각면에대한각도를계산한다. degree = anticlockwise? -degree : degree; // 각도의방향을반대로계산하도록한다. 추가 } context.save(); // 드로잉상태를저정한다. context.translate(x,y); // 드로잉좌표공간을다각형중심좌표로이동한다. context.rotate(startangle); // 시작각도를중심으로그리도록하기위하여회전한다. context.moveto(radius,0); // 다각형의시작위치로이동한다. for (var i = 1; i < sides; i++) { // 면의수만큼루프를반복한다 // 다음꼭지점까지선을그린다. context.lineto(radius*math.cos(degree*i),radius*math.sin(degree*i)); } context.closepath(); // 패스를닫는다. context.restore(); // 기존드로잉상태를복구한다. 25

26 와인딩규칙 (Winding Rule) Script 수정된다각형그리기 예제 사각형 오각형 육각형 팔각형 Canvas_11-03_fillStyleWinding.html polygon(context,125, 125, 100, 4, -Math.PI/2, false); // 사각형외부를그린다 polygon(context,125, 125, 50, 4, -Math.PI/2, true); // 사각형내부를그린다 polygon(context,350, 125, 100, 5, -Math.PI/2, false); // 오각형외부를그린다 polygon(context,350, 125, 50, 5, -Math.PI/2, true); // 오각형내부를그린다 polygon(context,550, 125, 100, 6, -Math.PI/2, false); // 육각형외부를그린다 polygon(context,550, 125, 50, 6, -Math.PI/2, true); // 육각형내부를그린다 polygon(context,750, 125, 100, 8, -Math.PI/2, false); // 팔각형외부를그린다 polygon(context,750, 125, 50, 8, -Math.PI/2, false); // 팔각형내부를그린다 26

27 와인딩규칙 (Winding Rule) HTML Living Standard 명세서 enum CanvasFillRule { "nonzero", "evenodd" }; void fill(optional CanvasFillRule fillrule = "nonzero"); void fill(path2d path, optional CanvasFillRule fillrule = "nonzero"); 짝 - 홀와인딩 넌제로와인딩 context.fill("evenodd"); context.fill("nonzero"); 예제 Canvas_11-03_fillRule.html 27

28 그라데이션 (Gradient) 스타일지정 선형그라데이션 (Linear Gradient) 시작좌표 (x0, y0) 와종료좌표 (x1, y1) 를지정함으로써, 시작좌표와종료좌표간의위치에따라서색상변화가있는그라데이션효과 gradient = context.createlineargradient(x0, y0, x1, y1) 선형그라데이션객체를생성한다. 인수로표시되는좌표로지정된라인을따라서그리는선형그라데이션을나타내는 CanvasGradient 객체를반환한다. 만일, x0 = x1 그리고 y0 = y1 이면, 선형그라데이션은아무것도그리지않는다. 방사형그라데이션 (Radial Gradient) 원의중심좌표 (x0, y0), 원의반지름 (r0), 또다른원의중심좌표 (x1, y1), 또다른원의반지름 (r1) 을지정함으로써, 두개의가상의원이생성되고그두개의가상의원사이의위치에따라서색상변화가있는그라데이션으로효과 gradient = context.createradialgradient(x0, y0, r0, x1, y1, r1) 방사형그라데이션객체를생성한다. 인수로표시되는원에의해주어진원뿔을따라서그리는방사형그라데이션을나타내는 CanvasGradient 객체를반환한다. 지정된반지름 (r0, r1) 중에하나가음수일경우에는 IndexSizeError 예외오류가발생한다. 28

29 그라데이션 (Gradient) 스타일지정 변환점색 ( 경계색 ) 지정 두좌표간또는두가상의원사이의변환점색상을지정 context.addcolorstop(offset, color) 주어진오프셋위치에변환점색상 (color-stop) 을추가한다. 주어진오프셋 (offset) 위치에그라데이션의변환점색상을추가한다. 0.0 은한쪽끝의오프셋위치이고 1.0 은다른한쪽끝의오프셋위치에해당된다. 중간의변환점색상을지정하기위해서는소수점으로지정하면된다 ( 변환점색상은색상과색상사이의경계색을의미 ) 그라데이션적용방법 var 객체 = context.createlineargradient(x0, y0, x1, y1); // 또는 context.creatradialgradient(x0, y0, r0, x1, y1, r1); 객체.addColorStop( 시작지점오프셋, 시작색상 ); 객체.addColorStop( 끝지점오프셋, 색상 ); context.fillstyle = 객체 ; 29

30 그라데이션 (Gradient) 스타일지정 Script 예제 Canvas_11-03_GradientLinear.html // 첫번째사각형을그린다. var rectstyle = context.createlineargradient(20,20,200,200); // 선형그라데이션객체생성 rectstyle.addcolorstop(0,"yellow"); // 시작노란색의옵셋을지정 rectstyle.addcolorstop(0.5,"red"); // 중간빨간색의옵셋을지정 rectstyle.addcolorstop(1,"blue"); // 종료파란색의옵셋을지정 context.fillstyle = rectstyle; // 그라데이션객체를채우기스타일로지정 context.fillrect(20,20,200,200); // 두번째사각형을그린다. rectstyle = context.createlineargradient(230,20,420,10); rectstyle.addcolorstop(0,"yellow"); // 시작노란색의옵셋을지정 rectstyle.addcolorstop(0.3,"red"); //30% 위치의빨간색상을지정 rectstyle.addcolorstop(1,"blue"); // 종료파란색의옵셋을지정 context.fillstyle = rectstyle; // 그라데이션객체를채우기스타일로지정 context.fillrect(230,20,200,200); // 세번째사각형을그린다. rectstyle = context.createlineargradient(450,20,430,210); rectstyle.addcolorstop(0,"yellow"); // 시작노란색의옵셋을지정 rectstyle.addcolorstop(0.7,"red"); //70% 위치의빨간색상을지정 rectstyle.addcolorstop(1,"blue"); // 종료파란색의옵셋을지정 context.fillstyle = rectstyle; // 그라데이션객체를채우기스타일로지정 context.fillrect(440,20,200,200); 30

31 그라데이션 (Gradient) 스타일지정 Script 예제 Canvas_11-03_GradientRadial.html // 첫번째원을그린다. // 방사형그라데이션객체를만든다. var gradient = context.createradialgradient( 100, 100, 10, 100, 100, 90 ); gradient.addcolorstop(0, "yellow"); gradient.addcolorstop(1, "blue"); context.fillstyle = gradient; context.arc(100, 100, 90, 0, 360*Math.PI/180, true); context.fill(); // 두번째원을그린다. gradient = context.createradialgradient( 350, 100, 10, 300, 100, 90 ); gradient.addcolorstop(0, "yellow"); gradient.addcolorstop(1, "blue"); context.fillstyle = gradient; context.arc(300, 100, 90, 0, 360*Math.PI/180, true); context.fill(); // 세번째원을그린다. gradient = context.createradialgradient( 480, 120, 10, 510, 100, 90 ); gradient.addcolorstop(0, "yellow"); gradient.addcolorstop(1, "blue"); context.fillstyle = gradient; context.arc(510, 100, 90, 0, 360*Math.PI/180, true); context.fill(); 31

32 그라데이션 (Gradient) 스타일지정 실습 Canvas_Study11-04_LinearGradient.html HTML 1 <button id="mybutton"> 색상변경하기 </button> Script var gradarray = ["red","purple","blue","green","yellow","orange"]; var gradient; // 그라데이션을위한변수 document.getelementbyid("mybutton").addeventlistener("click", changecolor, false); dogradient(); // 처음지정된색상으로그라데이션효과를적용한다. // 배열 gradarray[] 에있는색상으로그라데이션효과를적용한다. function dogradient() { gradient = context.createlineargradient(0, 0, canvas.width, 0); // 그라데이션객체생성 gradient.addcolorstop("0", gradarray[0]); // 시작색상 gradient.addcolorstop(".20", gradarray[1]); //20% 지점의색상 gradient.addcolorstop(".40", gradarray[2]); //40% 지점의색상 gradient.addcolorstop(".60", gradarray[3]); //60% 지점의색상 gradient.addcolorstop(".80", gradarray[4]); //80% 지점의색상 gradient.addcolorstop("1.0", gradarray[5]); // 마지막색상 } context.fillstyle = gradient; // 채우기속성에그라데이션객체스타일을적용한다. context.fillrect(0, 0, 350, 150); // 그라데이션스타일로채워진첫번째사각형을그린다. context.fillrect(0, 155, 600, 10); // 그라데이션영역을비교하기위한사각형을그린다. context.fillrect(200, 170, 600, 150); // 그라데이션스타일로채워진두번째사각형을그린다. // 배열의첫번째색상을제거해서마지막색상으로이동시켜서배열의색상을변경하고그라데이션효과를적용한다. function changecolor() { var temp = gradarray.shift(); gradarray.push(temp); 32 dogradient(); // 변경된색상으로그라데이션효과를다시적용시킨다. }

33 그라데이션 (Gradient) 스타일지정 실습 Canvas_Study11-04_LinearGradient.html 33

34 패턴 (Pattern) 스타일지정 패턴은불투명한 CanvasPattern 인터페이스를구현하는객체로표현 pattern = context.createpattern(image, repetition) CanvasPattern 객체를반환한다. 첫 번째 인수 image 는 패턴으로 사용할 이미지를 지정한다. 이미지는 HTMLImageElement, HTMLCanvasElement, 그리고 HTMLVideoElement 중에서지정해야한다. 두번째인수 repetition는주어진 image의반복되는방향을나타낸다. 반복 (repetition) 으로지정될수있는값은다음과같으며, 그이외의값을지정하면 SyntaxError 예외 오류가 발생한다. 이 값이 생략되면 기본적으로 repeat 값이 된다. - repeat( 양방향 ), repeat-x( 수평방향만 ), repeat-y( 수직방향만 ), no-repeat( 반복안함 ) 패턴채우기적용과정 1. 이미지파일의 Image 객체를생성한다. 2. onload 이벤트처리기를사용하여이미지로드가완료되면 createpattern() 메서드를사용하여패턴객체를생성한다. 3. fillstyle 속성에패턴객체를지정한다. 4. 원하는도형등을그리면내부를패턴으로채울수있게된다. 34

35 패턴 (Pattern) 스타일지정 예제 Canvas_11-03_Pattern.html Script var img = new Image(); // 이미지객체를만든다. img.src = "images/pattern.png"; // 이미지객체에이미지를지정한다. img.onload = function () { // 이미지가로드될때까지기다렸다가처리를계속한다. context.beginpath (); var pattern = context. createpattern (img, ""); // 이미지로패턴객체를생성한다. context.fillstyle = pattern; // 패턴객체를채우기스타일로지정한다. context.arc(100, 100, 70, 0, 2 * Math.PI, false); // 원을그린다. polygon(context, 270, 100, 70, 8, -Math.PI/2, false); // 팔각형외부를그린다 polygon(context, 270, 100, 40, 8, -Math.PI/2, true); // 팔각형내부를그린다 polygon(context, 440, 100, 70, 5, -Math.PI/2, false); // 오각형을그린다 context.fill (); // 원내부를채운다. } 35

36 패턴 (Pattern) 스타일지정 실습 Canvas_Study11-05_Pattern.html HTML Script <div> <img id="myimage" src="images/love.png" /> <p id="msg"> 이미지패턴이 repeat 으로지정되었습니다.</p> </div> <button onclick="draw('repeat')">repeat all</button> <button onclick="draw('repeat-x')">repeat-x</button> <button onclick="draw('repeat-y')">repeat-y</button> <button onclick="draw('no-repeat')">no-repeat</button><br /> var image, pattern, message; // 이미지와패턴, 메시지를위한객체를생성한다.. function draw(direction) { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); } context.clearrect(0, 0, canvas.width, canvas.height); // 캔버스영역을지운다. pattern = context.createpattern(image, direction); // 패턴객체를생성한다. context.fillstyle = pattern; // 채우기스타일을패턴으로지정한다. context.fillrect(0, 0, canvas.width, canvas.height); // 캔버스영역을지운다. message.innerhtml = " 이미지패턴이 " + direction + " 으로지정되었습니다 "; message = document.getelementbyid("msg"); //P 요소의아이디를가져온다. image = document.getelementbyid("myimage"); // 이미지의아이디를가져온다. // 이미지리스너를통해이미지가로드되면, draw() 메서드를호출한다. image.addeventlistener("load", function () { draw("repeat"); // 초기 repeat 값으로패턴을채우도록 draw() 메서드를호출한다. }, false); 36

37 패턴 (Pattern) 스타일지정 실습 Canvas_Study11-05_Pattern.html 37

38 그림자스타일지정 어떤도형이나텍스트, 또는이미지등에입체감을주기위한방법 그림자를지정하면, 도형이나텍스트등이캔버스위에마치떠있는듯한느낌이들도록하는시각적효과를가진다 context.shadowcolor [= value] 현재그림자의색상을반환한다. CSS로지정할수있는값을사용하여그림자의색상을변경할수있다. CSS 색상으로구문분석할수없는값은무시된다. 기본값은완전히투명한검정 (rgba(0, 0, 0, 0)) 으로초기화된다. context.shadowoffsetx [= value] 현재그림자의수평 (X 좌표 ) 오프셋을반환한다. 도형이나텍스트로부터그림자까지의수평오프셋을픽셀단위로지정한다. 기본값은 0 으로초기화되며, 변환행렬의영향을받지않는다. context. shadowoffsety [= value] 현재그림자의수직 (Y 좌표 ) 오프셋을반환한다. 도형이나텍스트로부터그림자까지의수직오프셋을픽셀단위로지정한다. 기본값은 0 으로초기화되며, 변환행렬의영향을받지않는다. context.shadowblur [= value] 그림자의흐림정도 ( 크기또는범위 ) 를지정한다. 값을지정하여그림자의흐림정도를지정할수있다. 값이작을수록그림자는선명해진다. 컨텍스트가생성될때, shadowblur 속성은 0 으로초기화된다. 38

39 그림자스타일지정 예제 Canvas_11-03_Shadow.html Script context.shadowblur = 15; // 그림자의흐림정도를크게지정하여많이흐리게한다. context.shadowcolor = "rgb(0, 0, 0)"; // 그림자의색상을검은색으로지정한다. polygon(context, 125, 125, 100, 4, -Math.PI/2, false); // 사각형외부를그린다 polygon(context, 125, 125, 50, 4, -Math.PI/2, true); // 사각형내부를그린다 context.fillstyle="rgba(227,11,93,0.75)"; context.fill(); context.shadowblur = 0; // 그림자의흐림정도를주지않는다. context.shadowoffsetx = 6; // 그림자를도형의 6 픽셀만큼오른쪽으로위치시킨다. context.shadowoffsety = 6; // 그림자를도형의 6 픽셀만큼아래쪽으로위치시킨다. context.shadowcolor = "rgba(125, 125, 125, 0.5)"; // 그림자를 50% 투명하게지정한다. polygon(context, 350, 125, 100, 5, -Math.PI/2, false); // 오각형외부를그린다 polygon(context, 350, 125, 50, 5, -Math.PI/2, true); // 오각형내부를그린다 context.fillstyle="rgba(51,128,255,1.0)"; context.fill(); context.shadowblur = 10; context.shadowoffsetx = -10; // 그림자를도형의 10 픽셀만큼왼쪽으로위치시킨다. context.shadowoffsety = -10; // 그림자를도형의 10 픽셀만큼위쪽으로위치시킨다. context.shadowcolor = "rgba(227,11,93,0.75)"; // 그림자를 25% 투명하게지정한다. polygon(context, 550, 125, 100, 6, -Math.PI/2, false); // 육각형외부를그린다 polygon(context, 550, 125, 50, 6, -Math.PI/2, true); // 육각형내부를그린다 context.fillstyle="rgba(11,227,93,1.0)"; context.fill(); 39

40 그림자스타일지정 예제 Canvas_11-03_Shadow.html Script context.shadowblur = 10; context.shadowoffsetx = 10; // 그림자를도형의 10 픽셀만큼오른쪽으로위치시킨다. context.shadowoffsety = 10; // 그림자를도형의 10 픽셀만큼아래쪽으로위치시킨다. context.shadowcolor = 'rgba(0,0,0,0.75)'; // 그림자의색상을 25% 투명한검은색으로지정한다. polygon(context, 750, 125, 100, 8, -Math.PI/2, false); // 팔각형외부를그린다 polygon(context, 750, 125, 50, 8, -Math.PI/2, true); // 팔각형내부를그린다 context.fillstyle="rgba(227,11,93,0.75)"; context.fill(); 40

41 다음학습 1 도형합성및변환 2 텍스트그리기 3 이미지처리하기 4 애니메이션 (Animation) 5 히트영역 (Hit Regions)

예제 <!DOCTYPE html><html><head> <script type="text/javascript"> function arcto() { var canvas = document.getelementbyid('canvas'); context = canvas.get

예제 <!DOCTYPE html><html><head> <script type=text/javascript> function arcto() { var canvas = document.getelementbyid('canvas'); context = canvas.get 1. 원그리기 1.1 원 / 원호그리기 - arc() 메서드 Ÿ arc() 메서드에서는시작좌표 (x, y), 반지름 (radius), 시작각도 (startangle), 종료각도 (endangle), 그리는방향 (anticlockwise) 을지정해야한다. Ÿ 시작각도와종료각도는브라우저에서원주를따라그려지는호에대한각도로라디안을사용한다. 따라서각도에 Math.PI/180을곱해서사용한다.

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var

More information

1.2 도형변환 Ÿ 캔버스의좌표계의이동, 회전및확대 / 축소기능을통한도형의변환을제공한다. Ÿ translate() 메서드는좌표공간의시작점을 (x,y) 로이동한다. Ÿ rotate() 메서드는좌표공간을시계방향으로회전한다. Ÿ scale() 메서드는좌표공간을수평 / 수직방

1.2 도형변환 Ÿ 캔버스의좌표계의이동, 회전및확대 / 축소기능을통한도형의변환을제공한다. Ÿ translate() 메서드는좌표공간의시작점을 (x,y) 로이동한다. Ÿ rotate() 메서드는좌표공간을시계방향으로회전한다. Ÿ scale() 메서드는좌표공간을수평 / 수직방 1. 도형합성및변환 1.1 도형합성 1.1.1 globalcompositeoperation 속성값 Ÿ globalcompositeoperation 속성을설명하면다양한기본합성동작을지정할수있다. 이속성을이용함으로써도형이그려진순서와상관없이겹쳐지는부분에대한처리가가능하다. 예제

More information

Ÿ 캔버스의크기와드로잉표면의크기 <canvas> 요소의 width/height 속성사용하여변경하면캔버스크기를드로잉표면의크기로자동변경한다. CSS를사용해서캔버스크기를지정하는경우는드로잉표면의크기는변경할수없기때문에캔버스와드로잉표면의불일치로인하여예기치않은결과를발생시킬수있음에주

Ÿ 캔버스의크기와드로잉표면의크기 <canvas> 요소의 width/height 속성사용하여변경하면캔버스크기를드로잉표면의크기로자동변경한다. CSS를사용해서캔버스크기를지정하는경우는드로잉표면의크기는변경할수없기때문에캔버스와드로잉표면의불일치로인하여예기치않은결과를발생시킬수있음에주 1. 기본내용 1.1 캔버스 Ÿ canvas 요소는웹페이지에서자바스크립트를통해즉시그림을그리는데사용되며단순한그림표현을넘어여러효과와함께텍스트및애니메이션표현이가능하다. Ÿ 그림을그리기위해서는 를사용해서그림영역을지정하고, 자바스크립트를사용해서실제그림을그린다. 1.2 캔버스좌표시스템 Ÿ 캔버스의좌표시스템은 2D 컨텍스트로, 왼쪽상단모서리에있는평면직교표면을

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 11 장. 캔버스 목차 11.1 캔버스이해하기 11.2 캔버스기본 API 사용하기 11.3 캔버스고급기능사용하기 2 11.1 캔버스이해하기 11.1.1 캔버스의특징 11.1.2 캔버스시작하기 3 HTML5 캔버스 자바스크립트를이용해서웹문서상에그림그리는기능 HTML5 이전 직접이미지파일을 태그를이용해서문서상에포함 자바애플릿이용

More information

01장 웹 개요와 실습 환경 구축

01장 웹 개요와 실습 환경 구축 10 장 캔버스 목차 1. 캔버스이해하기 2. 캔버스기본 API 사용하기 3. 캔버스고급기능사용하기 1 캔버스이해하기 자바스크립트를이용해서웹문서상에그림그리는기능 HTML5 이전 직접이미지파일을 태그를이용해서문서상에포함 자바애플릿이용 플래시이용 HTML5 캔버스 자바스크립트만을이용해서그림을그릴수있다 별도의플러그인이나프로그램설치없이가능 이미지나그림을합성,

More information

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법

More information

e-비즈니스 전략 수립

e-비즈니스 전략 수립 CSS3 속성 HTML5 웹프로그래밍입문 ( 개정판 ) Contents 학습목표 CSS3가지원하는스타일속성과스타일값을활용할수있습니다. CSS3를사용해레이아웃을잡을수있습니다. 내용 CSS3 단위 박스속성 display 속성 배경속성 글자속성 위치속성 float 속성 그림자속성 그레이디언트 2/85 1. CSS3 단위 키워드단위 W3C에서미리정의한단어 키워드를입력하면키워드에해당하는스타일이자동으로적용

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 제 5 장생성자와접근제어 1. 객체지향기법을이해한다. 2. 클래스를작성할수있다. 3. 클래스에서객체를생성할수있다. 4. 생성자를이용하여객체를초기화할수 있다. 5. 접근자와설정자를사용할수있다. 이번장에서만들어볼프로그램 생성자 생성자 (constructor) 는초기화를담당하는함수 생성자가필요한이유 #include using namespace

More information

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width

More information

슬라이드 1

슬라이드 1 프로세싱 광운대학교로봇학부박광현 프로세싱실행 2 C:\processing-3.2.1 폴더 창나타내기 실행 정지 3 폭 높이 600 400 도형그리기 배경칠하기 5 background(255, 255, 255); R G B background(255, 0, 0); background(255, 122, 0); 선그리기 6 background(255, 122, 0);

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 13. HTML5 위치정보와드래그앤드롭 SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준 SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.

More information

Microsoft PowerPoint - logo_2-미해답.ppt [호환 모드]

Microsoft PowerPoint - logo_2-미해답.ppt [호환 모드] Chap.2 Logo 프로그래밍기초 - 터틀그래픽명령어 ( 기본, 고급 ) 학습목표 터틀의이동과선그리기에대해살펴본다. 터틀의회전에대해살펴본다. 터틀펜과화면제어에대해살펴본다. 2012. 5. 박남제 namjepark@jejunu.ac.kr < 이동하기 > - 앞으로이동하기 forward 100 터틀이 100 픽셀만큼앞으로이동 2 < 이동하기 > forward(fd)

More information

HTML5-³¹Àå¿ë.PDF

HTML5-³¹Àå¿ë.PDF CHAPTER 2 Canvas 요소로그림그리기 HTML5 의 Canvas 요소는많은사람들이주목하고있는기능중하나로서그래픽을화면에표시할때사용된다 HTML5에서 Canvas 요소의생성은아래처럼아주간단하다 이코드가 Canvas 요소를생성하는데필요한전부이다 그렇다면이요소안에그림을그려넣기위해서는어떻게해야할까?

More information

PowerPoint Presentation

PowerPoint Presentation Canvas and SVG(Scalable Vector Graphics) 류관희 충북대학교 HTML5 Canvas? (1/2) The HTML5 Canvas is an Immediate Mode bit-mapped area of the screen that can be manipulated with JavaScript and CSS. The HTML5

More information

HTML5

HTML5 주사위게임 류관희 충북대학교 주사위게임규칙 플레이어 두개의주사위를던졌을때두주사위윗면숫자의합 The First Throw( 두주사위의합 ) 합 : 7 혹은 11 => Win 합 : 2, 3, 혹은 12 => Lost 합 : 4, 5, 6, 8, 9, 10 => rethrow The Second Throw 합 : 첫번째던진주사위합과같은면 => Win 합 : 그렇지않으면

More information

Visual Basic 반복문

Visual Basic 반복문 학습목표 반복문 For Next문, For Each Next문 Do Loop문, While End While문 구구단작성기로익히는반복문 2 5.1 반복문 5.2 구구단작성기로익히는반복문 3 반복문 주어진조건이만족하는동안또는주어진조건이만족할때까지일정구간의실행문을반복하기위해사용 For Next For Each Next Do Loop While Wend 4 For

More information

Microsoft PowerPoint - Java7.pptx

Microsoft PowerPoint - Java7.pptx HPC & OT Lab. 1 HPC & OT Lab. 2 실습 7 주차 Jin-Ho, Jang M.S. Hanyang Univ. HPC&OT Lab. jinhoyo@nate.com HPC & OT Lab. 3 Component Structure 객체 (object) 생성개념을이해한다. 외부클래스에대한접근방법을이해한다. 접근제어자 (public & private)

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 System Software Experiment 1 Lecture 5 - Array Spring 2019 Hwansoo Han (hhan@skku.edu) Advanced Research on Compilers and Systems, ARCS LAB Sungkyunkwan University http://arcs.skku.edu/ 1 배열 (Array) 동일한타입의데이터가여러개저장되어있는저장장소

More information

학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2

학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2 학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2 6.1 함수프로시저 6.2 서브프로시저 6.3 매개변수의전달방식 6.4 함수를이용한프로그래밍 3 프로시저 (Procedure) 프로시저 (Procedure) 란무엇인가? 논리적으로묶여있는하나의처리단위 내장프로시저 이벤트프로시저, 속성프로시저, 메서드, 비주얼베이직내장함수등

More information

1

1 1 2 3 4 5 6 b b t P A S M T U s 7 m P P 8 t P A S M T U s 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Chapter 1 29 1 2 3 4 18 17 16 15 5 6 7 8 9 14 13 12 11 10 1 2 3 4 5 9 10 11 12 13 14 15

More information

JU-TF43

JU-TF43 Intelligent serial 4.3 TFT LCD Module JUTF43 S/W User Guide 1 JUTF43... 3 2 부팅환경... 4 2.1 부팅환경설정... 4 2.1.1 Normal mode... 4 2.1.2 USB Mass-Storage mode... 4 2.1.3 Firmware Update mode... 5 2.2 Splash

More information

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher( 실행할페이지.jsp); 다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp"); dispatcher.forward(request, response); - 위의예에서와같이 RequestDispatcher

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 제 11 장상속 1. 상속의개념을이해한다. 2. 상속을이용하여자식클래스를작성할수있다. 3. 상속과접근지정자와의관계를이해한다. 4. 상속시생성자와소멸자가호출되는순서를이해한다. 이번장에서만들어볼프로그램 class Circle { int x, y; int radius;... class Rect { int x, y; int width, height;... 중복 상속의개요

More information

PowerPoint Presentation

PowerPoint Presentation public class SumTest { public static void main(string a1[]) { int a, b, sum; a = Integer.parseInt(a1[0]); b = Integer.parseInt(a1[1]); sum = a + b ; // 두수를더하는부분입니다 System.out.println(" 두수의합은 " + sum +

More information

PowerPoint Presentation

PowerPoint Presentation Class - Property Jo, Heeseung 목차 section 1 클래스의일반구조 section 2 클래스선언 section 3 객체의생성 section 4 멤버변수 4-1 객체변수 4-2 클래스변수 4-3 종단 (final) 변수 4-4 멤버변수접근방법 section 5 멤버변수접근한정자 5-1 public 5-2 private 5-3 한정자없음

More information

JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 ( ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각

JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 (   ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각 JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 ( http://java.sun.com/javase/6/docs/api ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각선의길이를계산하는메소드들을작성하라. 직사각형의가로와세로의길이는주어진다. 대각선의길이는 Math클래스의적절한메소드를이용하여구하라.

More information

<4D F736F F F696E74202D204347C3E2BCAEBCF6BEF D325FC4C4C7BBC5CDB1D7B7A1C7C8BDBA20B1E2BABBBFE4BCD22E >

<4D F736F F F696E74202D204347C3E2BCAEBCF6BEF D325FC4C4C7BBC5CDB1D7B7A1C7C8BDBA20B1E2BABBBFE4BCD22E > 목차 1 점그리기 2 선그리기 3 다각형그리기 이병래교수 / 방송대컴퓨터과학과 점그리기 OpenGL - 꼭짓점지정 점 glverte* 함수 하나의좌표로표현되는기하요소 void glverte*( 좌표 ); 3 차원그래픽스에서는기본적으로,, z의세좌표축으로표현되는 3차원직교좌표계를사용하여점의좌표를표현함 와 축으로표현되는 2차원평면은 z축의값이 0인 3차원좌표로볼수있음

More information

1989 Tim Berners-Lee invents the Web with HTML 1991 First Web Browser Released HTML Tags Specification Released 1994 First World Wide Web Conference H

1989 Tim Berners-Lee invents the Web with HTML 1991 First Web Browser Released HTML Tags Specification Released 1994 First World Wide Web Conference H 2011.09.28 Open Community Technical Seminar @NIA Developing Web Application with HTML5 1 2 3 4 5 History&Milestone of HTML5 HTML5 MarkUp CSS3 JavaScript API Compatibility online handout tinyurl.com/html5d

More information

chap 5: Trees

chap 5: Trees 5. Threaded Binary Tree 기본개념 n 개의노드를갖는이진트리에는 2n 개의링크가존재 2n 개의링크중에 n + 1 개의링크값은 null Null 링크를다른노드에대한포인터로대체 Threads Thread 의이용 ptr left_child = NULL 일경우, ptr left_child 를 ptr 의 inorder predecessor 를가리키도록변경

More information

<4D F736F F F696E74202D20C1A63038C0E520C5ACB7A1BDBABFCD20B0B4C3BC4928B0ADC0C729205BC8A3C8AF20B8F0B5E55D>

<4D F736F F F696E74202D20C1A63038C0E520C5ACB7A1BDBABFCD20B0B4C3BC4928B0ADC0C729205BC8A3C8AF20B8F0B5E55D> Power Java 제 8 장클래스와객체 I 이번장에서학습할내용 클래스와객체 객체의일생직접 메소드클래스를 필드작성해 UML 봅시다. QUIZ 1. 객체는 속성과 동작을가지고있다. 2. 자동차가객체라면클래스는 설계도이다. 먼저앞장에서학습한클래스와객체의개념을복습해봅시다. 클래스의구성 클래스 (class) 는객체의설계도라할수있다. 클래스는필드와메소드로이루어진다.

More information

<4D F736F F F696E74202D20C1A63233C0E520B1D7B7A1C7C820C7C1B7CEB1D7B7A1B9D628B0ADC0C729205BC8A3C8AF20B8F0B5E55D>

<4D F736F F F696E74202D20C1A63233C0E520B1D7B7A1C7C820C7C1B7CEB1D7B7A1B9D628B0ADC0C729205BC8A3C8AF20B8F0B5E55D> Power Java 제 23 장그래픽프로그래밍 이번장에서학습할내용 자바에서의그래픽 기초사항 기초도형그리기 색상 폰트 Java 2D Java 2D를이용한그리기 Java 2D 를이용한채우기 도형회전과평행이동 자바를이용하여서화면에그림을그려봅시다. 자바그래픽데모 자바그래픽의두가지방법 자바그래픽 AWT Java 2D AWT를사용하면기본적인도형들을쉽게그릴수있다. 어디서나잘실행된다.

More information

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch10. 문서객체모델 2014년 1학기 Professor Seung-Hoon Choi 10 문서객체모델 문서객체모델 (Document Object Model, DOM) 웹브라우저가 HTML 페이지를인식하는방식 document

More information

Microsoft PowerPoint - ch07 - 포인터 pm0415

Microsoft PowerPoint - ch07 - 포인터 pm0415 2015-1 프로그래밍언어 7. 포인터 (Pointer), 동적메모리할당 2015 년 4 월 4 일 교수김영탁 영남대학교공과대학정보통신공학과 (Tel : +82-53-810-2497; Fax : +82-53-810-4742 http://antl.yu.ac.kr/; E-mail : ytkim@yu.ac.kr) Outline 포인터 (pointer) 란? 간접참조연산자

More information

제8장 자바 GUI 프로그래밍 II

제8장 자바 GUI 프로그래밍 II 제8장 MVC Model 8.1 MVC 모델 (1/7) MVC (Model, View, Controller) 모델 스윙은 MVC 모델에기초를두고있다. MVC란 Xerox의연구소에서 Smalltalk 언어를바탕으로사용자인터페이스를개발하기위한방법 MVC는 3개의구성요소로구성 Model : 응용프로그램의자료를표현하기위한모델 View : 자료를시각적으로 (GUI 방식으로

More information

Microsoft PowerPoint - chap06-2pointer.ppt

Microsoft PowerPoint - chap06-2pointer.ppt 2010-1 학기프로그래밍입문 (1) chapter 06-2 참고자료 포인터 박종혁 Tel: 970-6702 Email: jhpark1@snut.ac.kr 한빛미디어 출처 : 뇌를자극하는 C프로그래밍, 한빛미디어 -1- 포인터의정의와사용 변수를선언하는것은메모리에기억공간을할당하는것이며할당된이후에는변수명으로그기억공간을사용한다. 할당된기억공간을사용하는방법에는변수명외에메모리의실제주소값을사용하는것이다.

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 10. DOM 과이벤트처리, 입력검 증 문서객체모델 (DOM) DOM 은 HTML 문서의계층적인구조를트리 (tree) 로표현 DOM 과 BOM HTML 문서를객체로표현한것을 DOM 웹브라우저를객체로표현한것을 BOM(Browser Object Model) HTML 요소찾기 동적인웹페이지를작성하려면원하는요소를찾아야한다. id 로찾기 태그이름으로찾기

More information

PowerPoint Presentation

PowerPoint Presentation 웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 1 04. CSS3 스타일속성 04. CSS3 Style Properties - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 2 CSS3 단위 1 CSS 는각각의스타일속성에다양한값을입력

More information

<4D6963726F736F667420576F7264202D20C3A520BCD2B0B32DC0CCB7B2B0C5B8E9B3AAB6FBBFD6B0E1C8A5C7DFBEEE322E646F63>

<4D6963726F736F667420576F7264202D20C3A520BCD2B0B32DC0CCB7B2B0C5B8E9B3AAB6FBBFD6B0E1C8A5C7DFBEEE322E646F63> 다툼과 상처에서 벗어나 행복한 부부로 사는 법 이럴 거면 나랑 왜 결혼했어? (이수경 지음/라이온북스/2012년 5월/340쪽/14,000원) - 1 - 이럴 거면 나랑 왜 결혼했어? (이수경 지음/라이온북스/2012년 5월/340쪽/14,000원) 책 소개 지고는 절대 못사는 부부 를 위한 결혼생활 코칭! 이 책은 아내가 먼저 읽고 남편에게 건네야 하는 책이다.

More information

(Microsoft PowerPoint - \301\24608\260\255 - \261\244\277\370\260\372 \300\347\301\372)

(Microsoft PowerPoint - \301\24608\260\255 - \261\244\277\370\260\372 \300\347\301\372) 게임엔진 제 8 강광원과재질 이대현교수 한국산업기술대학교게임공학과 학습목차 조명모델 광원의색상설정 재질 분산성분의이해 분산재질의구현 경반사성분의이해 경반사재질의구현 조명 (Illumination) 모델 조명모델 광원으로부터공간상의점들까지의조도를계산하는방법. 직접조명과전역조명 직접조명 (direct illumination) 모델 물체표면의점들이장면내의모든광원들로부터직접적으로받는빛만을고려.

More information

벡터(0.6)-----.hwp

벡터(0.6)-----.hwp 만점을위한 수학전문가남언우 - 벡터 1강 _ 분점의위치벡터 2강 _ 벡터의일차결합 3강 _ 벡터의연산 4강 _ 내적의도형적의미 5강 _ 좌표를잡아라 6강 _ 내적의활용 7강 _ 공간도형의방정식 8강 _ 구의방정식 9강 _2014년수능최고난도문제 좌표공간에 orbi.kr 1 강 _ 분점의위치벡터 01. 1) 두점 A B 이있다. 평면 에있는점 P 에대하여 PA

More information

11장 포인터

11장 포인터 누구나즐기는 C 언어콘서트 제 9 장포인터 이번장에서학습할내용 포인터이란? 변수의주소 포인터의선언 간접참조연산자 포인터연산 포인터와배열 포인터와함수 이번장에서는포인터의기초적인지식을학습한다. 포인터란? 포인터 (pointer): 주소를가지고있는변수 메모리의구조 변수는메모리에저장된다. 메모리는바이트단위로액세스된다. 첫번째바이트의주소는 0, 두번째바이트는 1, 변수와메모리

More information

문제여섯사람이일곱개의발판위에있다. 빈발판을중심으로세사람은왼쪽에서가운데를보고서있고, 다른세사람은오른쪽에서가운데를보고서있다. Figure: 양창모 ( 청주교육대학교컴퓨터교육과 ) Problems and Algorithms 2015 년여름 1 / 35 목표왼쪽에서있던세사람을오른쪽으로, 오른쪽에서있던사람을왼쪽으로이동한다. 가운데발판은여전히비어있어야한다. 최소의움직임으로목표를달성하도록한다.

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 5 장. 고급표현을위한 CSS3 활용 1 목차 5.1 박스모델설정하기 5.2 레이아웃설정하기 5.3 다양한효과설정하기 5.4 움직임설정하기 2 5.1 박스모델설정하기 5.1.1 영역설정을위한박스모델 5.1.2 박스모델유형의지정 3 영역설정을위한박스모델 배경영역 , , : 해당하는줄만큼배경 ,

More information

HTML5

HTML5 행맨 류관희 충북대학교 2 3 4 5 사전준비 단어목록읽기 단어빈칸보여주기 인터페이스를통해알파벳선택하면알파벳사라지기 단어에선택한알파벳이있으면표시하기 없으면선이나타원으로사람형태그리기 게임종료조건 : 모든맞추는경우 모두틀린경우 ( 행맨 ) 6 단어목록배열에저장 words.js var words = [ "muon", "blight","kerfuffle","qat"

More information

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 05 장 CSS3 선택자 1. 선택자개요 2. 기본선택자 3. 속성선택자 4. 후손선택자와자손선택자 5. 반응 / 상태 / 구조선택자 CSS 블록을생성할수있다. 선택자를이해하고적절한선택자를활용할수있다. 1 선택자개요 CSS3 선택자 특정한 HTML 태그를선택할때사용하는기능 선택한태그에원하는스타일이나스크립트적용가능 그림 5-1 CSS 블록 CSS 블록 style

More information

Microsoft PowerPoint - chap04-연산자.pptx

Microsoft PowerPoint - chap04-연산자.pptx int num; printf( Please enter an integer: "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); } 1 학습목표 수식의 개념과 연산자, 피연산자에 대해서 알아본다. C의 를 알아본다. 연산자의 우선 순위와 결합 방향에

More information

금오공대 컴퓨터공학전공 강의자료

금오공대 컴퓨터공학전공 강의자료 C 프로그래밍프로젝트 Chap 14. 포인터와함수에대한이해 2013.10.09. 오병우 컴퓨터공학과 14-1 함수의인자로배열전달 기본적인인자의전달방식 값의복사에의한전달 val 10 a 10 11 Department of Computer Engineering 2 14-1 함수의인자로배열전달 배열의함수인자전달방식 배열이름 ( 배열주소, 포인터 ) 에의한전달 #include

More information

PowerPoint Presentation

PowerPoint Presentation 객체지향프로그래밍 클래스, 객체, 메소드 ( 실습 ) 손시운 ssw5176@kangwon.ac.kr 예제 1. 필드만있는클래스 텔레비젼 2 예제 1. 필드만있는클래스 3 예제 2. 여러개의객체생성하기 4 5 예제 3. 메소드가추가된클래스 public class Television { int channel; // 채널번호 int volume; // 볼륨 boolean

More information

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM 22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed',

More information

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

var answer = confirm( 확인이나취소를누르세요.); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write( 확인을눌렀습니다.); else { document.write( 취소를눌렀습니다.); 자바스크립트 (JavaScript) - HTML 은사용자에게인터페이스 (interface) 를제공하는언어 - 자바스크립트는서버로데이터를전송하지않고서할수있는데이터처리를수행한다. - 자바스크립트는 HTML 나 JSP 에서작성할수있고 ( 내부스크립트 ), 별도의파일로도작성이가능하다 ( 외 부스크립트 ). - 내부스크립트 - 외부스크립트

More information

Microsoft PowerPoint - 05geometry.ppt

Microsoft PowerPoint - 05geometry.ppt Graphic Applications 3ds MAX 의기초도형들 Geometry 3 rd Week, 2007 3 차원의세계 축 (Axis) X, Y, Z 축 중심점 (Origin) 축들이모이는점 전역축 (World Coordinate Axis) 절대좌표 지역축 (Local Coordinate Axis) 오브젝트마다가지고있는축 Y Z X X 다양한축을축을사용한작업작업가능

More information

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch15. 문서객체조작 2014년 1학기 Professor Seung-Hoon Choi 15 문서객체조작 문서객체조작 자바스크립트만으로문서객체모델을다루려면복잡함 jquery를이용하면쉽게다룰수있다. 이책에서가장중요한부분 15.1 문서객체의클래스속성추가

More information

xlogo 1.0 beta version < 기본중의기본 > 1. 키워드 ( 명령어 ) 는변수명으로사용될수없다. 2. 키워드는대소문자를구분하지않고사용할수있다. 3. 변수명은대소문자를구분한다. 4. 변수를명시적으로정의하는과정필요없이값을대입하는순간변수정의되고, 대입한값의성

xlogo 1.0 beta version < 기본중의기본 > 1. 키워드 ( 명령어 ) 는변수명으로사용될수없다. 2. 키워드는대소문자를구분하지않고사용할수있다. 3. 변수명은대소문자를구분한다. 4. 변수를명시적으로정의하는과정필요없이값을대입하는순간변수정의되고, 대입한값의성 xlogo 1.0 beta version < 기본중의기본 > 1. 키워드 ( 명령어 ) 는변수명으로사용될수없다. 2. 키워드는대소문자를구분하지않고사용할수있다. 3. 변수명은대소문자를구분한다. 4. 변수를명시적으로정의하는과정필요없이값을대입하는순간변수정의되고, 대입한값의성질에따라변수타입이결정된다. 5. 명령어구분이명확한경우에는 ; 를사용하지않아도된다. 6. 키워드는여러별칭이있을수있으며별칭을사용하여도된다.

More information

[ 마이크로프로세서 1] 2 주차 3 차시. 포인터와구조체 2 주차 3 차시포인터와구조체 학습목표 1. C 언어에서가장어려운포인터와구조체를설명할수있다. 2. Call By Value 와 Call By Reference 를구분할수있다. 학습내용 1 : 함수 (Functi

[ 마이크로프로세서 1] 2 주차 3 차시. 포인터와구조체 2 주차 3 차시포인터와구조체 학습목표 1. C 언어에서가장어려운포인터와구조체를설명할수있다. 2. Call By Value 와 Call By Reference 를구분할수있다. 학습내용 1 : 함수 (Functi 2 주차 3 차시포인터와구조체 학습목표 1. C 언어에서가장어려운포인터와구조체를설명할수있다. 2. Call By Value 와 Call By Reference 를구분할수있다. 학습내용 1 : 함수 (Function) 1. 함수의개념 입력에대해적절한출력을발생시켜주는것 내가 ( 프로그래머 ) 작성한명령문을연산, 처리, 실행해주는부분 ( 모듈 ) 자체적으로실행되지않으며,

More information

Structure and Interpretation of Computer Programs: Assignment 3 Seung-Hoon Na October 4, George (아래 3개의 문제에 대한 구현이 모두 포함된 george.rkt파일을 제출하시오.

Structure and Interpretation of Computer Programs: Assignment 3 Seung-Hoon Na October 4, George (아래 3개의 문제에 대한 구현이 모두 포함된 george.rkt파일을 제출하시오. Structure and Interpretation of Computer Programs: Assignment 3 Seung-Hoon Na October 4, 2018 1 George (아래 3개의 문제에 대한 구현이 모두 포함된 george.rkt파일을 제출하시오. 실행후 Problem 1.3에 대한 Display결과가 나와야 함) George 그림은 다음과

More information

도형의닮음 1 강 - 닮은도형과닮음중심 사이버스쿨우프선생 닮음도형 : 일정한비율로확대또는축소하였을때닮음모양의도형 기호 : ABCD A'B'C'D' [ 예제 1 ] 그림에서와같이두닮은도형 ABCD 와 A'B'C'D' 에서대응점, 대

도형의닮음 1 강 - 닮은도형과닮음중심 사이버스쿨우프선생   닮음도형 : 일정한비율로확대또는축소하였을때닮음모양의도형 기호 : ABCD A'B'C'D' [ 예제 1 ] 그림에서와같이두닮은도형 ABCD 와 A'B'C'D' 에서대응점, 대 도형의닮음 1 강 - 닮은도형과닮음중심 사이버스쿨우프선생 www.cyberschool.co.kr 닮음도형 : 일정한비율로확대또는축소하였을때닮음모양의도형 기호 : '''' [ 예제 1 ] 그림에서와같이두닮은도형 와 '''' 에서대응점, 대응변을말하여라. ' ' ' ' [ 풀이] 대응점 : 와 ', 와 ', 와 ', 와 ' 대응변 : 와 '', 와 '', 와 '',

More information

12 강. 문자출력 Direct3D 에서는문자를출력하기위해서 LPD3DXFONT 객체를사용한다 LPD3DXFONT 객체생성과초기화 LPD3DXFONT 객체를생성하고초기화하는함수로 D3DXCreateFont() 가있다. HRESULT D3DXCreateFont

12 강. 문자출력 Direct3D 에서는문자를출력하기위해서 LPD3DXFONT 객체를사용한다 LPD3DXFONT 객체생성과초기화 LPD3DXFONT 객체를생성하고초기화하는함수로 D3DXCreateFont() 가있다. HRESULT D3DXCreateFont 12 강. 문자출력 Direct3D 에서는문자를출력하기위해서 LPD3DXFONT 객체를사용한다. 12.1 LPD3DXFONT 객체생성과초기화 LPD3DXFONT 객체를생성하고초기화하는함수로 D3DXCreateFont() 가있다. HRESULT D3DXCreateFont( in LPDIRECT3DDEVICE9 pdevice, in INT Height, in UINT

More information

Microsoft PowerPoint - C++ 5 .pptx

Microsoft PowerPoint - C++ 5 .pptx C++ 언어프로그래밍 한밭대학교전자. 제어공학과이승호교수 연산자중복 (operator overloading) 이란? 2 1. 연산자중복이란? 1) 기존에미리정의되어있는연산자 (+, -, /, * 등 ) 들을프로그래머의의도에맞도록새롭게정의하여사용할수있도록지원하는기능 2) 연산자를특정한기능을수행하도록재정의하여사용하면여러가지이점을가질수있음 3) 하나의기능이프로그래머의의도에따라바뀌어동작하는다형성

More information

Microsoft PowerPoint 세션.ppt

Microsoft PowerPoint 세션.ppt 웹프로그래밍 () 2006 년봄학기 문양세강원대학교컴퓨터과학과 세션변수 (Session Variable) (1/2) 쇼핑몰장바구니 장바구니에서는사용자가페이지를이동하더라도장바구니의구매물품리스트의내용을유지하고있어야함 PHP 에서사용하는일반적인변수는스크립트의수행이끝나면모두없어지기때문에페이지이동시변수의값을유지할수없음 이러한문제점을해결하기위해서 PHP 에서는세션 (session)

More information

PowerPoint Presentation

PowerPoint Presentation Package Class 3 Heeseung Jo 목차 section 1 패키지개요와패키지의사용 section 2 java.lang 패키지의개요 section 3 Object 클래스 section 4 포장 (Wrapper) 클래스 section 5 문자열의개요 section 6 String 클래스 section 7 StringBuffer 클래스 section

More information

(8) getpi() 함수는정적함수이므로 main() 에서호출할수있다. (9) class Circle private double radius; static final double PI= ; // PI 이름으로 로초기화된정적상수 public

(8) getpi() 함수는정적함수이므로 main() 에서호출할수있다. (9) class Circle private double radius; static final double PI= ; // PI 이름으로 로초기화된정적상수 public Chapter 9 Lab 문제정답 1. public class Circle private double radius; static final double PI=3.141592; // PI 이름으로 3.141592 로초기화된정적상수 (1) public Circle(double r) radius = r; (2) public double getradius() return

More information

스무살, 마음껏날아오르기위해, 일년만꾹참자! 2014학년도대학수학능력시험 9월모의평가 18번두이차정사각행렬 가 를만족시킬때, 옳은것만을 < 보기 > 에서있는대로고른것은? ( 단, 는단위행렬이다.) [4점] < 보기 > ㄱ. ㄴ. ㄷ. 2013학년도대학수학능력시험 16번

스무살, 마음껏날아오르기위해, 일년만꾹참자! 2014학년도대학수학능력시험 9월모의평가 18번두이차정사각행렬 가 를만족시킬때, 옳은것만을 < 보기 > 에서있는대로고른것은? ( 단, 는단위행렬이다.) [4점] < 보기 > ㄱ. ㄴ. ㄷ. 2013학년도대학수학능력시험 16번 친절한하영쌤의 수학 A형 약점체크집중공략오답률 Best 5 정복 하기! - 보충문제 행렬 2015학년도대학수학능력시험 9월모의평가 19번두이차정사각행렬 가 를만족시킬때, < 보기 > 에서옳은것만을있는대로고른것은? ( 단, 는단위행렬이고, 는영행렬이다.) [4점] < 보기 > ㄱ. 의역행렬이존재한다. ㄴ. ㄷ. 2015학년도대학수학능력시험 6월모의평가 19번두이차정사각행렬

More information

윈도우즈프로그래밍(1)

윈도우즈프로그래밍(1) 제어문 (2) For~Next 문 윈도우즈프로그래밍 (1) ( 신흥대학교컴퓨터정보계열 ) 2/17 Contents 학습목표 프로그램에서주어진특정문장을부분을일정횟수만큼반복해서실행하는문장으로 For~Next 문등의구조를이해하고활용할수있다. 내용 For~Next 문 다중 For 문 3/17 제어문 - FOR 문 반복문 : 프로그램에서주어진특정문장들을일정한횟수만큼반복해서실행하는문장

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 03 모델변환과시점변환 01 기하변환 02 계층구조 Modeling 03 Camera 시점변환 기하변환 (Geometric Transformation) 1. 이동 (Translation) 2. 회전 (Rotation) 3. 크기조절 (Scale) 4. 전단 (Shear) 5. 복합변환 6. 반사변환 7. 구조변형변환 2 기하변환 (Geometric Transformation)

More information

Microsoft PowerPoint - 제11장 포인터(강의)

Microsoft PowerPoint - 제11장 포인터(강의) 쉽게풀어쓴 C 언어 Express 제 11 장포인터 이번장에서학습할내용 포인터이란? 변수의주소 포인터의선언 간접참조연산자 포인터연산 포인터와배열 포인터와함수 이번장에서는포인터의기초적인지식을학습한다. 포인터란? 포인터 (pointer): 주소를가지고있는변수 1003 1004 1005 영화관 1002 1006 1001 포인터 (pointer) 1007 메모리의구조

More information

기본도형과작도 1 강 - 연습문제 1. 오른쪽그림과같이직선l 위에점,, 가있을때, 옳지않은것은? 1 = 2 = 3 = 직선l 4 = 5 = l 2. 오른쪽그림에서 = = 이다. 다음( ) 안에알맞은수를쓰시오. 1 =( 2 =( 3 =( 4 =( ) ) ) ) 3. 한평

기본도형과작도 1 강 - 연습문제 1. 오른쪽그림과같이직선l 위에점,, 가있을때, 옳지않은것은? 1 = 2 = 3 = 직선l 4 = 5 = l 2. 오른쪽그림에서 = = 이다. 다음( ) 안에알맞은수를쓰시오. 1 =( 2 =( 3 =( 4 =( ) ) ) ) 3. 한평 기본도형과작도 1 강 - 점, 선, 면 사이버스쿨우프선생 www.cyberschool.co.kr 도형의기본요소 1. 점 : 크기가없다. 0 차원, 있는것처럼점을찍는다. 2. 선 : 점이움직인자취( 흔적), 1차원 3. 면 : 선이움직인자취, 2차원 교점 : ( 선 + 선), ( 선 + 면) 이만나는점 교선 : ( 면 + 면) 이만나는선 [ 예제 1] 삼각뿔에서교점과교선의수는?

More information

Ÿ column-rule 속성은단사이의구분선을표현하기위한속성으로 column-rule-color, column-rule-style, column-rule-width 속성을한번에지정할수있다. 1.4 단의확장 Ÿ column-span 속성은다단을구성할때해당요소가얼마나많은단

Ÿ column-rule 속성은단사이의구분선을표현하기위한속성으로 column-rule-color, column-rule-style, column-rule-width 속성을한번에지정할수있다. 1.4 단의확장 Ÿ column-span 속성은다단을구성할때해당요소가얼마나많은단 1. 다단레이아웃 1.1 다단문서의개수및폭지정 Ÿ column-count 속성은다단을구성할때단의개수를지정하는속성이다. Ÿ column-width 속성은단의폭을지정하는속성이다. Ÿ column-width와 column-count 속성은동시에 auto 속성으로지정할수없다. Ÿ columns 속성은단의개수와폭을한번에지정하기속성이다. Ÿ 다단관련속성의사용은벤더프리픽스가필요하다.

More information

설계란 무엇인가?

설계란 무엇인가? 금오공과대학교 C++ 프로그래밍 jhhwang@kumoh.ac.kr 컴퓨터공학과 황준하 6 강. 함수와배열, 포인터, 참조목차 함수와포인터 주소값의매개변수전달 주소의반환 함수와배열 배열의매개변수전달 함수와참조 참조에의한매개변수전달 참조의반환 프로그래밍연습 1 /15 6 강. 함수와배열, 포인터, 참조함수와포인터 C++ 매개변수전달방법 값에의한전달 : 변수값,

More information

Open GL

Open GL Graphics Basic Windows & OpenGL Programming 컴퓨터그래픽스연구실 OpenGL 관련참고사이트 OpenGL 공식사이트 http://www.opengl.org/ Khronos Group http://www.khronos.org/ Nehe Productions http://nehe.gamedev.net/ OpenGL 파일설정 압축을푼후다음경로로파일을복사

More information

Chap 6: Graphs

Chap 6: Graphs 그래프표현법 인접행렬 (Adjacency Matrix) 인접리스트 (Adjacency List) 인접다중리스트 (Adjacency Multilist) 6 장. 그래프 (Page ) 인접행렬 (Adjacency Matrix) n 개의 vertex 를갖는그래프 G 의인접행렬의구성 A[n][n] (u, v) E(G) 이면, A[u][v] = Otherwise, A[u][v]

More information

gnu-lee-oop-kor-lec06-3-chap7

gnu-lee-oop-kor-lec06-3-chap7 어서와 Java 는처음이지! 제 7 장상속 Super 키워드 상속과생성자 상속과다형성 서브클래스의객체가생성될때, 서브클래스의생성자만호출될까? 아니면수퍼클래스의생성자도호출되는가? class Base{ public Base(String msg) { System.out.println("Base() 생성자 "); ; class Derived extends Base

More information

Microsoft PowerPoint 웹 연동 기술.pptx

Microsoft PowerPoint 웹 연동 기술.pptx 웹프로그래밍및실습 ( g & Practice) 문양세강원대학교 IT 대학컴퓨터과학전공 URL 분석 (1/2) URL (Uniform Resource Locator) 프로토콜, 호스트, 포트, 경로, 비밀번호, User 등의정보를포함 예. http://kim:3759@www.hostname.com:80/doc/index.html URL 을속성별로분리하고자할경우

More information

JAVA PROGRAMMING 실습 08.다형성

JAVA PROGRAMMING 실습 08.다형성 2015 학년도 2 학기 1. 추상메소드 선언은되어있으나코드구현되어있지않은메소드 abstract 키워드사용 메소드타입, 이름, 매개변수리스트만선언 public abstract String getname(); public abstract void setname(string s); 2. 추상클래스 abstract 키워드로선언한클래스 종류 추상메소드를포함하는클래스

More information

OCW_C언어 기초

OCW_C언어 기초 초보프로그래머를위한 C 언어기초 4 장 : 연산자 2012 년 이은주 학습목표 수식의개념과연산자및피연산자에대한학습 C 의알아보기 연산자의우선순위와결합방향에대하여알아보기 2 목차 연산자의기본개념 수식 연산자와피연산자 산술연산자 / 증감연산자 관계연산자 / 논리연산자 비트연산자 / 대입연산자연산자의우선순위와결합방향 조건연산자 / 형변환연산자 연산자의우선순위 연산자의결합방향

More information

PowerPoint Presentation

PowerPoint Presentation 자바프로그래밍 1 배열 손시운 ssw5176@kangwon.ac.kr 배열이필요한이유 예를들어서학생이 10 명이있고성적의평균을계산한다고가정하자. 학생 이 10 명이므로 10 개의변수가필요하다. int s0, s1, s2, s3, s4, s5, s6, s7, s8, s9; 하지만만약학생이 100 명이라면어떻게해야하는가? int s0, s1, s2, s3, s4,

More information

금오공대 컴퓨터공학전공 강의자료

금오공대 컴퓨터공학전공 강의자료 C 프로그래밍프로젝트 Chap 13. 포인터와배열! 함께이해하기 2013.10.02. 오병우 컴퓨터공학과 13-1 포인터와배열의관계 Programming in C, 정재은저, 사이텍미디어. 9 장참조 ( 교재의 13-1 은읽지말것 ) 배열이름의정체 배열이름은 Compile 시의 Symbol 로서첫번째요소의주소값을나타낸다. Symbol 로서컴파일시에만유효함 실행시에는메모리에잡히지않음

More information

Week3

Week3 2015 Week 03 / _ Assignment 1 Flow Assignment 1 Hello Processing 1. Hello,,,, 2. Shape rect() ellipse() 3. Color stroke() fill() color selector background() 4 Hello Processing 4. Interaction setup() draw()

More information

이 장에서 사용되는 MATLAB 명령어들은 비교적 복잡하므로 MATLAB 창에서 명령어를 직접 입력하지 않고 확장자가 m 인 text 파일을 작성하여 실행을 한다

이 장에서 사용되는 MATLAB 명령어들은 비교적 복잡하므로 MATLAB 창에서 명령어를 직접 입력하지 않고 확장자가 m 인 text 파일을 작성하여 실행을 한다 이장에서사용되는 MATLAB 명령어들은비교적복잡하므로 MATLAB 창에서명령어를직접입력하지않고확장자가 m 인 text 파일을작성하여실행을한다. 즉, test.m 과같은 text 파일을만들어서 MATLAB 프로그램을작성한후실행을한다. 이와같이하면길고복잡한 MATLAB 프로그램을작성하여실행할수있고, 오류가발생하거나수정이필요한경우손쉽게수정하여실행할수있는장점이있으며,

More information

<4D F736F F F696E74202D B3E22032C7D0B1E220C0A9B5B5BFECB0D4C0D3C7C1B7CEB1D7B7A1B9D620C1A638B0AD202D20C7C1B7B9C0D320BCD3B5B5C0C720C1B6C0FD>

<4D F736F F F696E74202D B3E22032C7D0B1E220C0A9B5B5BFECB0D4C0D3C7C1B7CEB1D7B7A1B9D620C1A638B0AD202D20C7C1B7B9C0D320BCD3B5B5C0C720C1B6C0FD> 2006 년 2 학기윈도우게임프로그래밍 제 8 강프레임속도의조절 이대현 한국산업기술대학교 오늘의학습내용 프레임속도의조절 30fps 맞추기 스프라이트프레임속도의조절 프레임속도 (Frame Rate) 프레임속도란? 얼마나빨리프레임 ( 일반적으로하나의완성된화면 ) 을만들어낼수있는지를나타내는척도 일반적으로초당프레임출력횟수를많이사용한다. FPS(Frame Per Sec)

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 ONE page html 이란? 원페이지는최근의홈페이지제작트렌드로한페이지에상단에서하단으로의마우스스크롤링을통해서컨텐츠를보여주는스타일의홈페이지입니다. USER 의시선을분산시키지않고위쪽에서아래쪽으로마우스스크롤링을통해서홈페이지의컨텐츠를보여주게됩니다. 반응형으로제작되어스마트폰, 아이패드, 태블릿,PC, 노트북등다양한디바이스에서자동으로최적화됩니다. ONE page 웹사이트사례

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 두근두근 파이썬수업 4 장자료의종류에는어떤것들이있나요? 이번장에서만들프로그램 (1) 터틀그래픽의거북이와인사하는프로그램을작성해보자. Run Python (2) 여러개의색상을리스트에저장하였다가하나씩꺼내서원들을그려보자 Run Python 파이썬에서사용할수있는자료의종류 파이썬과자료형 변수에어떤종류의자료도저장할수있다 x = 10 print("x =", x) x = 3.14

More information

1 1 장. 함수와극한 1.1 함수를표현하는네가지방법 1.2 수학적모형 : 필수함수의목록 1.3 기존함수로부터새로운함수구하기 1.4 접선문제와속도문제 1.5 함수의극한 1.6 극한법칙을이용한극한계산 1.7 극한의엄밀한정의 1.8 연속

1 1 장. 함수와극한 1.1 함수를표현하는네가지방법 1.2 수학적모형 : 필수함수의목록 1.3 기존함수로부터새로운함수구하기 1.4 접선문제와속도문제 1.5 함수의극한 1.6 극한법칙을이용한극한계산 1.7 극한의엄밀한정의 1.8 연속 1 1 장. 함수와극한 1.1 함수를표현하는네가지방법 1.2 수학적모형 : 필수함수의목록 1.3 기존함수로부터새로운함수구하기 1.4 접선문제와속도문제 1.5 함수의극한 1.6 극한법칙을이용한극한계산 1.7 극한의엄밀한정의 1.8 연속 2 1.1 함수를표현하는네가지방법 함수 f : D E 는집합 D 의각원소 x 에집합 E 에속하는단하나의원소 f(x) 를 대응시키는규칙이다.

More information

2020 학년도랑데뷰실전모의고사문제지 - 시즌 3 제 1 회 제 2 교시 수학영역 ( 나형 ) 1 5 지선다형 3. 그림은함수 를나타낸것이다 학년도 9월모의평가나형과싱크로율 99% 학년도수학영역대비랑데뷰실전모의고사가형-시즌1~ 시즌6, 나형-시즌

2020 학년도랑데뷰실전모의고사문제지 - 시즌 3 제 1 회 제 2 교시 수학영역 ( 나형 ) 1 5 지선다형 3. 그림은함수 를나타낸것이다 학년도 9월모의평가나형과싱크로율 99% 학년도수학영역대비랑데뷰실전모의고사가형-시즌1~ 시즌6, 나형-시즌 2020 학년도랑데뷰실전모의고사문제지 - 시즌 3 제 1 회 제 2 교시 1 5 지선다형 3. 그림은함수 를나타낸것이다. - 2020학년도 9월모의평가나형과싱크로율 99% - 2020학년도수학영역대비랑데뷰실전모의고사가형-시즌1~ 시즌6, 나형-시즌1~ 시즌2 ( 각시즌 4회분 ) 오르비전자책에서구매가능 - 오타, 오류수정파일은랑데뷰수학카페자료실에서무료다운로드가능

More information

UI TASK & KEY EVENT

UI TASK & KEY EVENT 2007. 2. 5 PLATFORM TEAM 정용학 차례 CONTAINER & WIDGET SPECIAL WIDGET 질의응답및토의 2 Container LCD에보여지는화면한개 1개이상의 Widget을가짐 3 Container 초기화과정 ui_init UMP_F_CONTAINERMGR_Initialize UMP_H_CONTAINERMGR_Initialize

More information

예제 1.1 ( 관계연산자 ) >> A=1:9, B=9-A A = B = >> tf = A>4 % 4 보다큰 A 의원소들을찾을경우 tf = >> tf = (A==B) % A

예제 1.1 ( 관계연산자 ) >> A=1:9, B=9-A A = B = >> tf = A>4 % 4 보다큰 A 의원소들을찾을경우 tf = >> tf = (A==B) % A 예제 1.1 ( 관계연산자 ) >> A=1:9, B=9-A A = 1 2 3 4 5 6 7 8 9 B = 8 7 6 5 4 3 2 1 0 >> tf = A>4 % 4 보다큰 A 의원소들을찾을경우 tf = 0 0 0 0 1 1 1 1 1 >> tf = (A==B) % A 의원소와 B 의원소가똑같은경우를찾을때 tf = 0 0 0 0 0 0 0 0 0 >> tf

More information

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt 변수와상수 1 변수란무엇인가? 변수 : 정보 (data) 를저장하는컴퓨터내의특정위치 ( 임시저장공간 ) 메모리, register 메모리주소 101 번지 102 번지 변수의크기에따라 주로 byte 단위 메모리 2 기본적인변수형및변수의크기 변수의크기 해당컴퓨터에서는항상일정 컴퓨터마다다를수있음 short

More information

Microsoft PowerPoint - 제11장 포인터

Microsoft PowerPoint - 제11장 포인터 쉽게풀어쓴 C 언어 Express 제 11 장포인터 이번장에서학습할내용 포인터이란? 변수의주소 포인터의선언 간접참조연산자 포인터연산 포인터와배열 포인터와함수 이번장에서는포인터의기초적인지식을학습한다. 포인터란? 포인터 (pointer): 주소를가지고있는변수 1003 1004 1005 영화관 1002 1006 1001 포인터 (pointer) 1007 메모리의구조

More information

(Microsoft PowerPoint - 07\300\345.ppt [\310\243\310\257 \270\360\265\345])

(Microsoft PowerPoint - 07\300\345.ppt [\310\243\310\257 \270\360\265\345]) 클래스의응용 클래스를자유자재로사용하자. 이장에서다룰내용 1 객체의치환 2 함수와클래스의상관관계 01_ 객체의치환 객체도변수와마찬가지로치환이가능하다. 기본예제 [7-1] 객체도일반변수와마찬가지로대입이가능하다. 기본예제 [7-2] 객체의치환시에는조심해야할점이있다. 복사생성자의필요성에대하여알아보자. [ 기본예제 7-1] 클래스의치환 01 #include

More information

슬라이드 1

슬라이드 1 2007 년 2 학기윈도우게임프로그래밍 제 7 강프레임속도의조절 이대현 핚국산업기술대학교 학습내용 프레임속도의조절 30fps 맞추기 스프라이트프레임속도의조절 프레임속도 (Frame Rate) 프레임속도란? 얼마나빨리프레임 ( 일반적으로하나의완성된화면 ) 을만들어낼수있는지를나타내는척도 일반적으로초당프레임출력횟수를많이사용핚다. FPS(Frame Per Sec)

More information

비트와바이트 비트와바이트 비트 (Bit) : 2진수값하나 (0 또는 1) 를저장할수있는최소메모리공간 1비트 2비트 3비트... n비트 2^1 = 2개 2^2 = 4개 2^3 = 8개... 2^n 개 1 바이트는 8 비트 2 2

비트와바이트 비트와바이트 비트 (Bit) : 2진수값하나 (0 또는 1) 를저장할수있는최소메모리공간 1비트 2비트 3비트... n비트 2^1 = 2개 2^2 = 4개 2^3 = 8개... 2^n 개 1 바이트는 8 비트 2 2 비트연산자 1 1 비트와바이트 비트와바이트 비트 (Bit) : 2진수값하나 (0 또는 1) 를저장할수있는최소메모리공간 1비트 2비트 3비트... n비트 2^1 = 2개 2^2 = 4개 2^3 = 8개... 2^n 개 1 바이트는 8 비트 2 2 진수법! 2, 10, 16, 8! 2 : 0~1 ( )! 10 : 0~9 ( )! 16 : 0~9, 9 a, b,

More information

Microsoft PowerPoint - additional01.ppt [호환 모드]

Microsoft PowerPoint - additional01.ppt [호환 모드] 1.C 기반의 C++ part 1 함수 오버로딩 (overloading) 디폴트매개변수 (default parameter) 인-라인함수 (in-line function) 이름공간 (namespace) Jong Hyuk Park 함수 Jong Hyuk Park 함수오버로딩 (overloading) 함수오버로딩 (function overloading) C++ 언어에서는같은이름을가진여러개의함수를정의가능

More information

; struct point p[10] = {{1, 2, {5, -3, {-3, 5, {-6, -2, {2, 2, {-3, -3, {-9, 2, {7, 8, {-6, 4, {8, -5; for (i = 0; i < 10; i++){ if (p[i].x > 0 && p[i

; struct point p[10] = {{1, 2, {5, -3, {-3, 5, {-6, -2, {2, 2, {-3, -3, {-9, 2, {7, 8, {-6, 4, {8, -5; for (i = 0; i < 10; i++){ if (p[i].x > 0 && p[i ; struct point p; printf("0이아닌점의좌표를입력하시오 : "); scanf("%d %d", &p.x, &p.y); if (p.x > 0 && p.y > 0) printf("1사분면에있다.\n"); if (p.x < 0 && p.y > 0) printf("2사분면에있다.\n"); if (p.x < 0 && p.y < 0) printf("3사분면에있다.\n");

More information

Microsoft PowerPoint - gnu-w06-python_[실습]_day13-turtle-shape

Microsoft PowerPoint - gnu-w06-python_[실습]_day13-turtle-shape DAY 13 거북이그래픽응용하기 모두의파이썬 20 일만에배우는프로그래밍기초 거북이그래픽응용하기 01 자주사용하는거북이그래픽명령어 02 03 키보드로거북이를조종해서그림그리기 마우스로거북이를조종해서그림그리기 2 1. 자주사용하는거북이그래픽명령어 자주사용하는거북이그래픽명령어 2 함수설명사용예 pos( ) / position( ) xcor( ), ycor( ) goto(x,

More information

2장 변수와 프로시저 작성하기

2장  변수와 프로시저 작성하기 Chapter. RequestDispatcher 활용 요청재지정이란? RequestDispatcher 활용 요청재지정구현예제 Chapter.9 : RequestDispatcher 활용 1. 요청재지정이란? 클라이언트로부터요청받은 Servlet 프로그램이응답을하지않고다른자원에수행흐름을넘겨다른자원의처리결과를대신응답하는것또는다른자원의수행결과를포함하여응답하는것을요청재지정이라고한다.

More information

프로그래밍개론및실습 2015 년 2 학기프로그래밍개론및실습과목으로본내용은강의교재인생능출판사, 두근두근 C 언어수업, 천인국지음을발췌수정하였음

프로그래밍개론및실습 2015 년 2 학기프로그래밍개론및실습과목으로본내용은강의교재인생능출판사, 두근두근 C 언어수업, 천인국지음을발췌수정하였음 프로그래밍개론및실습 2015 년 2 학기프로그래밍개론및실습과목으로본내용은강의교재인생능출판사, 두근두근 C 언어수업, 천인국지음을발췌수정하였음 CHAPTER 9 둘중하나선택하기 관계연산자 두개의피연산자를비교하는연산자 결과값은참 (1) 아니면거짓 (0) x == y x 와 y 의값이같은지비교한다. 관계연산자 연산자 의미 x == y x와 y가같은가? x!= y

More information

Microsoft PowerPoint - chap06-1Array.ppt

Microsoft PowerPoint - chap06-1Array.ppt 2010-1 학기프로그래밍입문 (1) chapter 06-1 참고자료 배열 박종혁 Tel: 970-6702 Email: jhpark1@snut.ac.kr 한빛미디어 출처 : 뇌를자극하는 C프로그래밍, 한빛미디어 -1- 배열의선언과사용 같은형태의자료형이많이필요할때배열을사용하면효과적이다. 배열의선언 배열의사용 배열과반복문 배열의초기화 유연성있게배열다루기 한빛미디어

More information

실험. Multimeter 의사용법및기초회로이론 Multimeter 의사용법 멀티미터 (Multimeter) 는저항, 전압, 전류등을측정할수있는계측기로서전면은다음그림과같다. 멀티미터를이용해서저항, 전압, 전류등을측정하기위해서는다음그림과같은프로브 (probe) 를멀티미터

실험. Multimeter 의사용법및기초회로이론 Multimeter 의사용법 멀티미터 (Multimeter) 는저항, 전압, 전류등을측정할수있는계측기로서전면은다음그림과같다. 멀티미터를이용해서저항, 전압, 전류등을측정하기위해서는다음그림과같은프로브 (probe) 를멀티미터 실험. Multimeter 의사용법및기초회로이론 Multimeter 의사용법 멀티미터 (Multimeter) 는저항, 전압, 전류등을측정할수있는계측기로서전면은다음그림과같다. 멀티미터를이용해서저항, 전압, 전류등을측정하기위해서는다음그림과같은프로브 (probe) 를멀티미터의전면패널에꼽는다. 통상적으로검은색프로브는전면패널의검은단자 (COM) 에꼽으며, 빨간색프로브는빨간색단자에꼽는다.

More information

<4D F736F F F696E74202D20C1A63034B0AD202D20C7C1B7B9C0D3B8AEBDBAB3CABFCD20B9ABB9F6C6DBC0D4B7C2>

<4D F736F F F696E74202D20C1A63034B0AD202D20C7C1B7B9C0D3B8AEBDBAB3CABFCD20B9ABB9F6C6DBC0D4B7C2> 게임엔진 제 4 강프레임리스너와 OIS 입력시스템 이대현교수 한국산업기술대학교게임공학과 학습내용 프레임리스너의개념 프레임리스너를이용한엔터티의이동 OIS 입력시스템을이용한키보드입력의처리 게임루프 Initialization Game Logic Drawing N Exit? Y Finish 실제게임루프 오우거엔진의메인렌더링루프 Root::startRendering()

More information