DOM Canvas 그라디언트 그리기

주요 함수

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. }

결과