채우기의 스타일 지정 HTML5




채우기의 스타일 지정



스타일의 지정방법은 총 두가지이다.


     

     - stroke() 이나 strokeRect() ===> strokeStyle 속성으로 지정함
     - fill() 이나 fillRect()            ===> fillStyle 속성으로 지정함

 

 

 

속성을 지정할 수 있는것들에는 아래와 같이 세가지가 있다.


 

     - CSS
     - 그라데이션 
     - 패턴

 


 

 

CSS는 일단 기존의 CSS3에서 사용하던 방식을 그대로 사용할 수 있다.
두번째 그라데이션에 대한 메서드를 먼저 살펴보자.

    

 

    선형 그라데이션 : createLinearGradient(x0, y0, x1, y1);
    원형 그라데이션 : createRadialGradient(x0, y0, r0, x1, y1, r1);

    

 

위 두개를 사용하면 CanvasGradient 형의 객체가 반환되는데, 이 객체에는 addColorStop() 메서드가 포함되어 있다.
이 메서드의 사용법은 아래와 같다. 

 

   addColorStop(offset, color);
    

    offset은 0.0(시작점) ~ 1.0(끝점) / color는 CSS3의 칼라값




그러면 그라디언트관련 예제코드를 살펴보자.

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 TEST </TITLE>
</HEAD>
<BODY>
 <canvas id="canvas1" width="500" height="500"></canvas>

 <SCRIPT LANGUAGE="JavaScript">
 <!--
 var canvas = document.getElementById("canvas1");
 var context = canvas.getContext("2d");

 

 var gradient = context.createLinearGradient(0, 0, 200, 200);

 

 gradient.addColorStop(0, "white");
 gradient.addColorStop(1, "black");

 

 context.fillStyle = gradient;

 context.fillRect(0, 0, 200, 200);

 //-->
 </SCRIPT>

</BODY>
</HTML>

 

위 코드는 캔버스를 하나 만들어놓고, 캔버스에 선형 그라디언트를 그려넣은뒤 사각형을 그려내는 코드이다.
코드중에 createLinearGradient() 메서드가 바로 그라디언트를 생성해내는 코드이다. 물론 아직 그리진 않았다.

 

혹시 왜 (0, 0, 200, 0) 인지 궁금한 사람이 있을까? 나는 (0, 0)부터 (200, 200)이 아닐까? 하는 생각을 해 보았다.
 그래서 코드를 (200, 200) 으로 바꾸어보니, 이유를 알겠더라. (궁금한 사람은 직접 해보자)

 

그리고 addColorStop() 메서드로 각 끝지점의 칼라값을 지정해 주었다. 여기에서는 흰색부터 검정색까지의 그라디언트가 생성되도록 설정하였다. 이렇게 만들어진 그라디언트인 gradient객체를 채우기의 스타일로 지정하였고, 그리기 컨텍스트를 이용하여 사격형을 그려내었다.


결과는 어떠할까?

 

 

 

 

그리고 원형 그라디언트 예제코드도 함께 살펴보자.

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 TEST </TITLE>
</HEAD>
<BODY>
 <canvas id="canvas1" width="500" height="500"></canvas>

 <SCRIPT LANGUAGE="JavaScript">
 <!--
 var canvas = document.getElementById("canvas1");
 var context = canvas.getContext("2d");

 

 var gradient = context.createRadialGradient(90, 90, 0, 50, 50, 200);

 

 gradient.addColorStop(0, "white");
 gradient.addColorStop(1, "black");

 

 context.fillStyle = gradient;

 context.arc(100, 100, 50, 0, 2 * Math.PI, true);
 context.fill();

 //-->
 </SCRIPT>

</BODY>
</HTML>

 
마찬가지로 캔버스를 생성하였고, 그라디언트를 생성하였다.
위의 예제와는 좀 다르게 원형 그라디언트를 지정하였음에 주의하자.

 

시작점과 종료점을 각각 white와 black으로 설정하였고, 채우기 스타일로 지정하였고,  컨텍스트객체를 이용하여 원을 그려내어, fill() 메서드를 이용하여 내부를 그라디언트로 채워주었다.  어려운게 없다. 배운대로 하면 된다.


그럼 결과는 어떤 모양일까?

 

 

 우리는 원을 그려내었지만, 그라디언트를 이용하였기에 마치 구를 그린것처럼 표현되었다.
 멋지지 아니한가?

 

 자. 이제 세가지 종류의 스타일 지정방법중의 마지막 '패턴'에 대해 살펴볼 차례이다.
 패턴은 이미지/비디오 또는 다른 캔버스를 사용하여 선이나 채우기의 패턴을 지정할 수 있는 기능이란다.

 패턴을 만들때에는 아래의 메서드를 사용한다.

 

   createPattern(image, repeat);


 
 이게뭐임? 저 안에는 뭐가 들어가는 거임? 하는 사람들이 있을거라 믿는다.


 image 부분에는 위에서 말한것처럼 이미지/비디오 또는 다른 캔버스를 지정하면 되고,
 repeat 부분에는 이전에 CSS에서 사용하던대로 'repeat / repeat-x / repeat-y / no-repeat' 중 하나를 선택하여 사용하면 된다.
 
 이런식으로 패턴을 만들어서 strokeStyle이나 fillStyle에 지정하면 된다.
 예제를 보자.

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 TEST </TITLE>
</HEAD>
<BODY>
 <canvas id="canvas1" width="300" height="300"></canvas>

 <SCRIPT LANGUAGE="JavaScript">
 <!--
 var canvas = document.getElementById("canvas1");
 var context = canvas.getContext("2d");

 

 var image = new Image();

 

 image.onload = function(){
  var pattern = context.createPattern(image, "repeat");


  context.fillStyle = pattern;
  context.fillRect(0, 0, 100, 100);
 };

 image.src = "test.jpg";

 //-->
 </SCRIPT>

</BODY>
</HTML>

 

이전에 캔버스에 이미지를 출력할때와 거의 흡사한 예제이다.
이미지 객체인 image를 생성하였고, 아직 불러오진 않았지만 불러오기가 완료될때 호출될 익명메서드를 설정하였다.


익명메서드의 내용은 반복되는 패턴을 생성하여, 채우기 속성으로 지정하였고 이 패턴속성을 사용하는 사각형을 그려내었다.
실행한 결과는 어떨까?

 

 
뭔가 반복되는 패턴이 나타났다. 원래 이미지는 어떤걸까?

 

 

위 이미지가 원본 이미지이다.

이미지가 사격형으로 크기만큼 반복되면서 채우기 속성으로 설정되어진 것이다.


이렇게 선과 채우기에 대한 속성지정방법에 대해 살펴보았다.
사용될런지는 잘 모르겠는데 반투명하게 어떠한 물체를 그려넣는 방법도 존재한다고 한다.


globalAlpha라는 속성인데, 0.0(투명) 부터 1.0(투명하지않음) 까지의 값으로 설정하는데,

실제로 적용해보아도 특별히 뭐가 달라지는것인지 잘 모르겠다. @_@

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 TEST </TITLE>
</HEAD>
<BODY>
 <canvas id="canvas1" width="300" height="300"></canvas>

 <SCRIPT LANGUAGE="JavaScript">
 <!--
 var canvas = document.getElementById("canvas1");
 var context = canvas.getContext("2d");

 

 var image = new Image();

 

 image.onload = function(){
  var pattern = context.createPattern(image, "repeat");


  context.fillStyle = pattern;
  context.globalAlpha = 0.9;
  context.fillRect(0, 0, 100, 100);
 };

 image.src = "test.jpg";

 //-->
 </SCRIPT>

</BODY>
</HTML>

 

결과는 생략하며, 다음번에는 선에 대한 스타일 지정방법에 대해 살펴보자.


덧글

댓글 입력 영역


통계 위젯 (화이트)

1522
132
358625

red 210