HTML5 채우기 스타일 지정하기

HTML5 채우기 스타일 지정하기

 

채우기 스타일 지정

색으로 채워진 도형을 그릴 때는 fill( ) 메서드를 사용하고, 채우기 색을 지정할 때는 fillStyle 속성을 사용합니다.

도형의 색을 지정할 때는 채우기 색 지정 외에 투명도도 지정할 수 있습니다.

색의 투명도는 globalAlpha 속성을 사용하며 0~1 사이의 값을 지정할 수 있습니다.

 

속성	설명
fillStyle	채우기 색상을 지정함
globalAlpha	투명도 값을 지정함(0 ~ 1)

 

채우기 스타일 지정 형식

형식

context.fillStyle = 색상;

예제

context.lineWidth = 20; context.strokeStyle = 'blue'; context.strokeRect(100, 100, 120, 120); context.fillStyle = 'yellow';   /* 채우기 색상 지정함 */ context.fillRect(100, 100, 120, 120);

 

그라데이션 효과 지정하기

createLinearGradient( ) 메서드를 사용하여 선형 그라데이션 효과를 줄 수 있으며, createRadialGradient( ) 메서드를 사용하여 원형 그라데이션 효과를 줄 수 있습니다.

 

메서드	설명
createLinearGradient(x1, y1, X2, y2)	선형 그라데이션 지정함
createRadialGradient(x1, y1, r1, x2, y2, r2)	원형 그라데이션 지정함
addColorStop(offset, color)	그라데이션 경계색을 지정함(offset 값 : 0 ~ 1)

 

그라데이션 효과 지정 형식

형식

var  변수 = context.createLinearGradient(x1, y1, x2, y2); 변수.addColorStop(시작점, 색상); 변수.addColorStop(끝점, 색상); context.fillStyle = 변수;

예제

<!-- 선형 그라데이션 생성   --> var  gradient = context.createLinearGradient(100, 100, 200, 200); gradient.addColorStop(0, 'blue');       <!--  시작점 색상을 지정 --> gradient.addColorStop(1, 'yellow');   <!-- 끝점 색상을 지정  --> context.fillStyle = gradient; context.fillRect(120, 120, 100, 100);

 

채우기 스타일 실습 프로그램