HTML - 캔버스 그라디언트

캔버스에는 선형과 원형 그라디언트를 사용할 수 있는 메서드를 제공합니다.

메소드	설 명
createLinearGradient(x1, y1, x2, y2)	선형 그라디언트 그리기 fillStyle, strokeStyle 중 하나에 그라디언트를 적용 x1: x축 시작점 y1: y축 시작점 x2: y축 끝점 y2: y축 끝점 사각형, 원, 선, 텍스트 등 채우는데 사용
createRadialGradient(x0, y0, r0, x1, y1, r1)	원형 그라디언트 그리기 fillStyle, strokeStyle 중 하나에 그라디언트를 적용 x0: 내부 원 시작점 x축 y0: 내부 원 시작점 y축 r0: 내부 원 반경 x1: 바깥 쪽 원 시작점 x축 y1: 바깥 쪽 원 시작점 y축 r1: 바깥 쪽 원의 반경 사각형, 원, 선, 텍스트 등 채우는데 사용
addColorStop(stop, color)	Color-Stop 정지점(색 변환지점) CSS의 색상 지정방법과 동일하며 색상변화에 따라 하나 이상 지정 stop: 시작과 끝 사이의 정지점  0 ~ 1 사이의 값 color: 정지점에 표시할 CSS 색상 값 createLinearGradient(), createRadialGradient() 와 함께 사용 addColorStop()을 여러 번 호출하여 그라디언트를 지정하며, 호출하지 않을 경우 표시되지 않음
createPattern(image, repetition)	이미지를 지정된 방향으로 반복적 패턴을 만듦 (요소는 이미지, 동영상 또는 canvas 요소) image: 패턴 이미지로 사용할 요소 repetition: 이미지를 반복하는 방법 지정  repeat: x*y방향으로 반복함. 기본 값  repeat-x: 가로 방향만 반복함  repeat-y: 세로 방향만 반복함  no-repeat: 반복하지 않음 반복되는 요소는 사각형, 원, 선, 텍스트 등 채우는데 사용

선형 그라디언트

색상 변화는 createLinearGradient() 를 통해 생성된 그라디언트 객체에 addColorStop() 에 의해 색상과 변환 지점을 지정합니다. 그라디언트를 요소에 적용하려면 fillStyle, strokeStyle 중 하나에 먼저 그라디언트를 할당해야 합니다.

<style>canvas { border: 1px solid black; }</style> 
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 250;
var context = canvas.getContext('2d');

var grd = context.createLinearGradient(0,0,0,150);
grd.addColorStop(0, "black");
// 30% 지점 색상
grd.addColorStop("0.3", "magenta");
// 50% 지점 색상
grd.addColorStop("0.5", "blue");
// 60% 지점 색상
grd.addColorStop("0.6", "green");
// 80% 지점 색상
grd.addColorStop("0.8", "yellow");
// 100% 지점 색상
grd.addColorStop(1, "red");

// 사각형 그라디언트
context.fillStyle = grd;
context.fillRect(10,10,130,130);

// 직선 그라디언트
context.strokeStyle = grd;
context.lineCap = "round";
context.lineWidth = 10;

context.beginPath();
context.moveTo(160, 10);
context.lineTo(160, 140);
context.stroke();
</script>

 

위 예제에서 첫 번째 이미지는 사각형 그라디언트이고, 두 번째는 직선에 그라디언트를 지정한 결과입니다. 다음은 텍스트에 그라디언트한 결과입니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id= "mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 400;
canvas.height = 200;
var context = canvas.getContext('2d');

var grd = context.createLinearGradient(0, 0, canvas.width, 0);
grd.addColorStop("0", "magenta");
// 25% 지점 색상
grd.addColorStop(".25", "blue");
// 50% 지점 색상
grd.addColorStop(".50", "green");
// 75% 지점 색상
grd.addColorStop(".75", "yellow");
// 100% 지점 색상
grd.addColorStop("1.0", "red");

context.font = "30px 굴림체";
context.fillStyle = grd;
context.strokeStyle = "red";
context.strokeText("하보니 - strokeText", 20, 50);
context.fillText("하보니 - fillText", 20, 100);
context.strokeText("하보니 - stroke&fillText", 20, 150);
context.fillText("하보니 - stroke&fillText", 20, 150);
</script>

원형 그라디언트

원형 그라디언트로 createRadialGradient()를 사용합니다. 생성된 그라디언트 요소의 색상과 정지점을 지정하는 방법은 선형 그라디언트와 동일합니다. 원형 그라디언트를 요소에 적용하기 전에 fillStyle, strokeStyle 중 하나를 먼저 그라디언트를 할당해야 합니다

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 250;
var context = canvas.getContext('2d');

var grd = context.createRadialGradient(100,100,15, 50,50,100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");

context.fillStyle = grd;
context.fillRect(10,10,130,130);
</script>

두 원 사이에 두 개의 정지점을 만들었습니다. 작은 원은 x*y축으로 100*100(px)이고 반지름이 15(px)입니다. 바깥 쪽 원은 x*y축으로 50*50(px) 이고 반지름이 100(px)인 두 개의 원을 만들었습니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 250;
var context = canvas.getContext('2d');


var grd = context.createRadialGradient(30,30,15, 50,50,100);
grd.addColorStop(0, "#f00");
grd.addColorStop(1, "#0f0");
grd.addColorStop(1, "rgba(0,0,0,0)");

context.fillStyle = grd;
context.strokeStyle = '#000';

// 첫 번째 그라디언트
context.beginPath();
context.arc(50,50,50, 0,2*Math.PI);
context.fill(); 

// 두 번째 그라디언트
context.fillRect(105,10,100,100);
context.strokeRect(105,10,100,100); 
</script>

위 예제는 원형 그라디언트를 fillStyle에 적용하고, x*y축이 50*50(px)인 위치에 반지름이 50(px)인 원을 만들었습니다. 두 번째 원은 사각형 안에 그라디언트를 하였는데, 녹색으로 채워진 이유가 두 번째 그림을 보면 알 수 있듯 안쪽 작은 원이 빨간색이 그려지는 곳이고 바깥 쪽 큰 원이 녹색으로 채워져 있습니다.

패턴 반복 이미지

지정된 방향으로 지정된 요소를 반복해 배경을 채울 수 있습니다. 지정 요소는 이미지나 동영상 또는 canvas의 요소일 수 있습니다. drawImage() 보다 쉽게 반복 패턴을 만들 수 있습니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 250;
var context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height); 
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
  var pat = context.createPattern(img, 'repeat');
  context.rect(0, 0, 200, 150);
  context.fillStyle = pat;
  context.fill();
};
</script>

위 코드는 repeat 를 적용한 결과입니다. no-repeat 은 반복시키는 않는 대신 한 번만 표시됩니다.