DOM Canvas 그라디언트 그리기

주요 함수

	설명
createLinearGradient(x1, y1, x2, y2)	(x1, y1) (x2, y2)의 사각형을 그라디언트로 그린다.
createRadialGradient(x1, y1, r1, x2, y2, r2)	두 원 (x1, y1, r1), (x2, y2, r2)

 

 

Linear Gradient

일반적인 선형 그라디언트를 그린다.

 

javascript 

배경색 속성에 그라디언트를 세팅한다.

1. function draw(target) {

2.     var canvas = document.getElementById("draw");

3.  

4.     // 지원 여부 체크

5.     if (canvas.getContext) {

6.         // HTML5에서 canvas를 지원시

7.  

8.         // 그리기 오브젝트를 받음

9.         var ctx = canvas.getContext('2d');

10.  

11.         // 선형 그라디언트 생성

12.         var grd = ctx.createLinearGradient(0,0,200,0);

13.         grd.addColorStop(0,"red");

14.         grd.addColorStop(1,"white");

15.  

16.         // 배경 스타일을 그라디언트로 설정한다.

17.         ctx.fillStyle = grd;

18.         ctx.fillRect(10,10,150,80);

19.     }

20. }

결과

 

 

Circular Gradient

원형 그라디언트를 그린다.

API에 대한 상세 내용은 아직 필자도 파악을 다 하지 못했다.

 

1. function draw(target) {

2.     var canvas = document.getElementById("draw");

3.  

4.     // 지원 여부 체크

5.     if (canvas.getContext) {

6.         // HTML5에서 canvas를 지원시

7.  

8.         // 그리기 오브젝트를 받음

9.         var ctx = canvas.getContext('2d');

10.  

11.         // 원형 그라디언트 생성

12.         var grd = ctx.createRadialGradient(75,50,5,90,60,100);

13.         grd.addColorStop(0,"red");

14.         grd.addColorStop(1,"white");

15.  

16.         // Fill with gradient

17.         ctx.fillStyle = grd;

18.         ctx.fillRect(10,10,150,80);

19.     }

20. }

결과