HTML 캔버스 그라디언트
캔버스 - 그라디언트
그라디언트는 직사각형, 원, 선, 텍스트 등을 채우는 데 사용할 수 있습니다. 캔버스의 모양은 단색으로 제한되지 않습니다.
두 가지 다른 유형의 그라디언트가 있습니다.
- createLinearGradient( x,y,x1,y1 ) - 선형 그래디언트 생성
- createRadialGradient( x,y,r,x1,y1,r1 ) - 방사형/원형 그래디언트 생성
그라디언트 개체가 있으면 두 개 이상의 색상 정지점을 추가해야 합니다.
addColorStop() 메서드는 색상 정지점과 그라디언트를 따라 위치를 지정합니다. 그라디언트 위치는 0에서 1 사이일 수 있습니다.
그라디언트를 사용하려면 fillStyle 또는 strokeStyle 속성을 그라디언트로 설정한 다음 모양(사각형, 텍스트 또는 선)을 그립니다.
createLinearGradient() 사용
예시
선형 그라디언트를 만듭니다. 그라디언트로 사각형 채우기:
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
createRadialGradient() 사용:
예시
방사형/원형 그라디언트를 만듭니다. 그라디언트로 사각형 채우기:
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);