(중간)2020년 2학기 - HTML5

점수 : 30점 / 30점 만점

-------------------------------------------------------------------------

과제	캔버스와 관련해서 출석수업에서 다룬 자바스크립트 메서드와 속성을 모두 찾아 다음 조건에 맞게 정리하시오. (1)  메서드와 속성을 분리하여 각각 알파벳 순으로 정렬한다. (2)  각 메서드와 속성에 대해서 기능 및(매개변수, 속성값 등의) 사용 방법을 간단히(5줄이내) 설명한다.(3)  강의에서 다루지 않은 것은 인정하지 않는다.

 

1. 메소드

(1)addColorStop(offset, color)

그라데이션 경계색 지정을 위해 사용되는 메소드로 0개 이상 사용될 수 있다. Offset의 값은 0.0~1.0 사이의 값을 가지는데, 0.0은 시작점 그리고 1.0은 끝점을 나타내며, 중간점은 0~1 사이의 소수값으로 표현한다.

 

(2)arc(…)

원이나 원호를 그리는 메소드로 6개의 인자, 즉 원/원의 중심 좌표 x, y, 반지름, 시작각도, 종료각도, 그리는 방향이 필요하다. 각도의 단위는 라디안(radian)을 사용하는데, Math.PI는 180도가 된다. 그리는 방향은 시계방향이 디폴트값으로 false이고, 반시계 방향은 true이다. arc( ) 메도드를 사용해서 원을 그리기 위해서는 그리는 방향에 상관없이 두 종류의 각도를 0도와 360도로 지정하면 된다.

context.beginPath(); context.arc(100,100,75,0,2*Math.PI, false); context.stroke();

 

(3)beginPath( )

캔버스에 그림을 그리는 방법은 두가지가 있는데, stokeRect( ) 메소드처럼 어떤 단계도 거치지 않고 즉시 캔버스에 그림을 그리는 방법이고, 또 다른 방법은 각 도형을 이루는 선들의 집합이 패스(path)를 기반으로 그림을 그리는 방법이 있다. Path를 기반으로 그림을 그리기 위해서 이전의 패스를 모두 지우고 새로운 패스를 그리기 시작함을 선언한다.

 

(4)bezierCurveTo( )

3차 베지에 곡석(Bezier Curve)을 그리는 메소드로, 3차 베이에 곡선을 그리기 위해서는 4개의 점이 필요한데, 시작점은 moveTo( )로 지정하고, bezierCurveTo ( ) 메소드를 사용해서 2개의 제어점과 1개의 종료점을 인자로 지정한다.

context.beginPath(); context.moveTo(50, 100); context.bezierCurveTo(130,50,180,180, 180,50); context.stroke();

(5)clearRect(x,y,w,h)

주어진 사각형 영역을 지우기도 하지만, 캔버스 전체적으로 보면 캔버스에 그려진 그래픽을 모두 지우고 초기화할 수도 있다. 즉, 지우려는 사각형이 캔버스 전체가 되도록 clearRect(0,0,canvas.width,canvas.heigth)와 같이 지정하여 캔버스에 그려진 그래픽을 모두 지우고 초기한다.

 

(6)closePath( )

둘 이상의 점을 가진 경우에는 마지막 점과 첫 번째 점을 연결하는 직선을 추가하는 닫힌 모양의 도형을 만든다.

 

(7)createLinearGrdient(x1,y1,x2,y2)

선형 그라데이션을 지정하는 메소드로 색상의 점진적인 변화가 시작점(x1,y1)에서 종료점(x2,y2)의 직선 방향으로 발생한다.

var gradient = context.createLinearGrdient(0,0,150,150); gradient.addColorStop(0,’red’); gradient.addColorStop(0.2,’green’); context.filStyle = gradient; context.fillRect(0,0,150,150);

 

(8)createPattern( )

도형이나 텍스트를 채울 때 색상이나 그라데이션을 사용할 수도 있고, 이미지로 패턴을 만들어 사용할 수도 있다. 채우기를 위한 이미지 패턴을 만들기 위해서 사용하는 메소드이다.

①   이미지 파일의 image 객체를 생성하고 이미지 파일의 지정 ②    이미지 로드가 완료되면 메소드를 사용해서 이미지 패턴 객체를 생성 ③   fillStyle 속성을 이미지 패턴 객체로 지정 ④   원하는 도형을 그린다.

 

(9)createRadialGrdient(x1,y1,r1,x2,y2,r2)

방사형 그라데이션를 지정하는 메소드로, 중심의 좌표(x1,y1)이고 반지름 r1인 하나의 상의 원과 중심의 좌표(x2,y2)) 그리고 반지름 r2인 또 다른 가상의 원 사이에서 점진적인 색상의 변화가 모든 방향으로 발생한다.

var gradient = context.createLinearGrdient(150,150,30, 150,150, 130); gradient.addColorStop(0,’red’); gradient.addColorStop(0.2,’green’); context.filStyle = gradient; context.fillRect(0,0,canvas.width, canvas.height);

 

(10)fill( )

패스기반 메소드로 현재 패스에 있는 도형들을 채우기 스타일로 실제로 캔버스에 출력한다. 패스기반의 그림을 그릴 때에는 stroke( ) 또는 fill( ) 메소드를 사용해야 한다.

context.beginPath(); context.moveTo(50, 100); context.lineTo(100, 150); context.fill();

 

(11)fillRect(x,y,w,h)

시작점의 좌표(x,y),를 기준으로 너비 w, 높이 h인 내부가 색상으로 채워져 있는 사각형을 그린다. canvas 객체의 style 속성을 통해 CSS 속성을 사용하의 캔버스의 배경색을 제어한다.

context.fillRect(50,50,100,100);

 

(12)fillText( )

지정된 위치(x,y)를 기준으로 색이 채워진 텍스트를 그리는 메소드로, x,y는 텍스트를 그리는 기준점을 나타내는데, 이 위치에 텍스트의 왼쪽 하단 모서리를 맞춰서 그리낟. 또한 maxWidth 인자는 주어진 텍스트의 최대 너비를 지정하는 의미를 갖고 선택적으로 사용되며, maxWidth가 지정된 경우 텍스트는 maxWidth의 크기에 맞게 조정해서 텍스트를 그린다.

context.filText(text, x, y, [, maxWidth])

 

(13)getContext(“2d” )

Canvas 객체를 얻었으면 canvas 객체로부터 그림을 그리기 위한 도구, 즉, 모든 그래픽 능력을 제공하는 캔버스 컨텍스트 객체를 구해야 한다. 캔버스에 그리는 실제 기능은 모두 컨텍스트를 통해서 처리되는 데, 컨텍스트를 얻기 위해서 캔버스 객체의 getContext(“2d” ) 메소드를 사용한다.

var context = canvas.getContext (“2d”);

 

(14)getElementById()

HTML문서에서 요소의 ID를 이용하여 찾는다. Canvas를 HTML에 그리기 위에 작성한 canvas의 요소를 찾을 때에도 getElementById( )사용한다.

var canvas = document.getElementById(“myCanvas”);

 

(15)lineTo(x,y)

패스 기반의 그림을 그리기 위해 moveTo( )를 사용하여 그림의 시작점을 지정한 후 다음 지점까지 선을 그리기 위해 lineTo( ) 메소드를 이용하여 선을 그린다. lineTo( )를 연속해서 사용하면 계속해서 점과 점 사이를 잇는 선이 그려진다.

context.beginPath(); context.moveTo(50, 100); context.lineTo(100, 100); context.lineTo(100, 150); context.lineTo(50, 150);

 

(16)measureText( )

현재 글꼴에서 주어진 텍스트의 폭을 반환한다.

var myTextWidth = context.measureText(text);

 

(17)moveTo(x,y)

패스 기반의 그림을 그리기 위해 beginPath( )를 사용하는 패스를 초기화한 후에 선을 그리기 위해서 그림의 시작점을 지정한다.

context.beginPath(); context.moveTo(50, 100);

 

(18)quadraticCurveTo( )

2차 베지에 곡석(Bezier Curve)을 그리는 메소드로, 2차 베이에 곡선을 그리기 위해서는 3개의 점이 필요한데, 시작점은 moveTo( )로 지정하고, quadraticCurveTo( ) 메소드의 인자로서 남머지 두 점인 제어점과 종료점을 지정한다.

context.beginPath(); context.moveTo(50, 100); context.quadraticCurveTo (130,50,180,180); context.stroke();

 

(19)rect(x,y,w,h)

패스기반의 사각형을 그리는 메소드

context.beginPath(); context.rect(50, 100, 100, 100);

 

(20)setLineDash( )

실선이 아닌 점선으로 그릴 때 사용하는 메소드로 원하는 점선의 패턴을 설정할 수 있다. 인자로서 점선 패턴의 형식, 즉 점선에서 선이 그려지는 부분과 그렇지 않은 부분으로 구성되는 패턴의 형식을 지정한다.

context.setLineDash([2, 3]);  // 선의 길이는 2픽셀이고 공백의 길이는 3픽셀의 점선 context.setLineDash([3]);  // 선과 공백의 길이를 모두 3픽셀의 점선 context.setLineDash([5,4,3,2]);  //  두 종류의 점선 패턴이 반복되는 점선

 

(21)stokeText( )

지정된 위치(x,y)를 기준으로 테두리만 있는 텍스트를 그리는 메소드로, x,y는 텍스트를 그리는 기준점을 나타내는데, 이 위치에 텍스트의 왼쪽 하단 모서리를 맞춰서 그리낟. 또한 maxWidth 인자는 주어진 텍스트의 최대 너비를 지정하는 의미를 갖고 선택적으로 사용되며, maxWidth가 지정된 경우 텍스트는 maxWidth의 크기에 맞게 조정해서 텍스트를 그린다.

context.stokeText(text, x, y, [, maxWidth])

 

(22)stroke( )

패스기반 메소드로 현재 패스에 있는 도형들을 선 스타일로 실제로 캔버스에 출력한다. 패스기반의 그림을 그릴 때에는 stroke( ) 또는 fill( ) 메소드를 사용해야 한다.

context.beginPath(); context.moveTo(50, 100); context.lineTo(100, 150); context.stoke();

 

(23)strokeRect(x,y,w,h)

시작점의 좌표(x,y),를 기준으로 너비 w, 높이 h인 테두리선만 있는 사각형을 그린다.

context.strokeRect(50,50,100,100);

 

 

 

2. 속성

(1) fillStyle

도형을 채우는 색상을 지정하는 속성

 

(2) font

글자 스타일, 글자 크기, 글자체를 지정(기본값 : “10px sans-serif”)

 

(3) globalAlpha

색상의 투명도를 지정하는 속성

- 값 : 0.0(완전 투명) ~ 1.0(완전 불투명)

 

(4) globalCompositeOperation

캔버스에 도형을 그릴 때, 여러 도형을 겹쳐서 그리면 나중에 그려지는 도형이 이전 도형의 위에 그려지게 되는데, globalCompositeOperation 속성을 사용하여 도형이 그려지는 순서에 상관없이 도형 간이 겹쳐지는 부분에 대해서 다양한 처리를 한다.

No	속성값	설명
1	source-atop	대상 위에 소스 도형이 표시되지만, 대상과 겹치지 않는 소스 부분은 표시되지 않음
2	source-in	대상 안에 있는 소스 부분만 표시
3	source-out	대상 밖에 있는 소스 부분만 표시
4	source-over	기본값. 대상 위에 소스 도형을 표시
5	destination-atop	소스 위에 소스 도형이 표시되지만, 소스과 겹치지 않는 대상 부분은 표시되지 않음
6	destination-in	소스 안에 있는 대상 부분만 표시
7	destination-out	소스 밖에 있는 대상 부분만 표시
8	destination-over	기본값. 소스 위에 대상 도형을 표시
9	lighter	겹쳐진 부분은 두 색의 합을 구해서 표시
10	copy	대상은 무시하고, 소스만 표시
11	xor	겹쳐진 부분을 투명하게 표시

 

(5) lineCap

선의 양쪽 끝부분의 모양을 지정하는 속성

- 값 : butt(기본값), round, square

 

(6) lineJoin

두 선이 만나 꺽이는 모서리 부분의 모양을 지정하는 속성

- 값 : bevel, round, miter(기본값)

 

(7) linewidth

선의 두께(기본값 1.0)을 픽셀 값으로 지정하는 속성

 

(8) shadowBlur

그림자의 흐림 정도를 지정하는 속성(기본값 0)

 

(9) shadowColor

그림자의 색상을 지정하는 속성

- 값 : 기본값은 완전 투명한 검은색 rgba(0,0,0,0)

 

(10) shadowOffsetX

대상을 기분으로 그림자의 수평(x좌표) 오프셋을 지정하는 속성(기본값 0)

 

(11) shadowOffsetY

대상을 기분으로 그림자의 수평(y좌표) 오프셋을 지정하는 속성(기본값 0)

 

(12) strokeStyle

선의 색상을 지정하는 속성

- 값 : 색상명, 16진수 색상코드, rgb(), rgba(), 그라데이션, 패턴

 

(13) textAlign

수평 방향의 정렬 방식을 지정하는 속성

- 값 : left, right,center, start(기본값), end

 

(14) textBaseline

텍스트의 수직 방향의 기준선을 지정하는 속성

- 값 : top, hanging, middle, alphabetic(기본값), ideographic, bottom