본문 바로가기

그라데이션

[그래픽 효과] 그라데이션(gradient)/color-stop() [그래픽 효과] 그라데이션(gradient)/color-stop() 그라데이션에 대해 앞에서도 다룬적이 있지만 여기서 다른 방식으로 한번더 다루어 보도록 하겠습니다. CSS3에서 그라데이션 사각형을 만드려면 background 속성(혹은 background-image 속성)에 gradient() 메서드로 값을 지정합니다. -webkit-gradient( linear, 시작위치, 종료위치 from(처음색), to(마지막 색)); 시작 위치와 종료 위치는 top, bottom, left, right를 조합하여 지정합니다. 아래 코드는 왼쪽 위에서 오른쪽 아래로 그라데이션을 적용 시 코드조합입니다. .box1{ background: -webkit-gradient(linear, left top, right bo.. 더보기
[그래픽 처리] 그라데이션(gradation)/createLinearGradient()/CreateRadialGradient() [그래픽 처리] 그라데이션(gradation)/createLinearGradient()/CreateRadialGradient() [1] 선형 그라데이션 - createLinearGradient() 선형 그라데이션은 왼쪽에서 오른쪽(혹은 아래에서 위)으로 갈수록 점점 색이 변화하는 그라데이션을 말합니다. createLinearGradient() 메서드를 사용해 지정할 수 있습니다. addColorStop() 메서드의 첫 번째 인수인 시작 지점에 0~1.0까지의 실수를 지정하여, 어느 지점에 어떤 색을 표시할 것인지를 지정합니다. //CanvasGradient 객체 만듬 CanvasGradient = ctx.createLinearGradient(x1, y1. x2, y2) //그라데이션 색 추가 Canvas.. 더보기