HTML5 선 스타일 지정하기

HTML5 선 스타일 지정하기

선을 그리는 데 있어서 선 두께, 선 끝부분 스타일, 선이 꺾이는 부분 스타일, 선 색 등은 특정 속성에 값을 지정함으로써 다양한 변화를 줄 수 있습니다.

 

선 스타일 속성

속성	설명
lineWidth	선 두께를 지정함
lineCap	선 끝부분 스타일을 지정함(butt, round, square)
lineJoin	선이 꺾이는 부분의 스타일을 지정함(bevel, round, miter)
strokeStyle	선의 색상을 지정함

 

선의 두께 지정하기

선의 두께 지정은 lineWidth 속성을 사용합니다.

형식

context.lineWidth = 두께;

 

예제

context.moveTo(70, 70); context.lineTo(250, 250); context.lineWidth = 12;       <!-- 선의 두께를 지정함  --> context.stroke( );

 

선의 색상 지정하기

선의 색상 지정은 strokeStyle 속성을 사용합니다.

strokeStyle 속성 값은 색상 이름, 색상 코드, RGB, RGBA 형식을 지정할 수 있습니다.

속성 값 형식	설명
색상 이름	색상 이름 지정(예 : red,  green, blue)
색상 코드	색상 코드 값을 지정함(예 : #ff0000, #00ff00, #0000ff)
RGB	0~255 까지의 RGB 값을 지정함(예 : rgb(255, 0, 0))
RGBA	RGB 형식에 0~1 사이의  값을 갖는 투명도를 값으로 추가함(예 : rgba(255, 0, 0, 0.7))

선의 색상 지정 형식

형식

context.strokeStyle = 색상;

예제

context.moveTo(70, 70); context.lineTo(250, 250); context.lineWidth = 12;                  <!-- 선의 두께를 지정함  --> context.strokeStyle = 'blue';        <!-- 선의 색상을 지정함  --> context.stroke( );

 

선의 끝부분 스타일 지정

① lineCap 속성 사용

② lineJoin 속성을 사용

두 개 이상의 lineTo( ) 메서드를 사용하여 선을 그리는 경우 선이 꺾이는 부분의 모양에 대해서는 lineJoin 속성을 사용합니다.

선의 끝부분 스타일 지정 형식

형식

context.lineCap = 스타일;        <!--  스타일 값 : butt, round, square  -->   context.lineJoin = 스타일;       <!--  스타일 값 : bevel, round, miter  -->

예제

context.moveTo(70, 70); context.lineTo(120, 220); context.lineTo(220, 70); context.lineWidth = 12;         context.lineCap = 'round';      <!-- 선의 끝부분 스타일을 지정함  -->  context.lineJoin = 'round';     <!-- 선이 꺾이는 부분의 스타일을 지정함  -->  context.stroke( );

 

선 스타일 지정 실습 프로그램