fillStyle의 두 번째 사용 사례는 그라데이션 채우기입니다. 그라디언트 색상은 선형 그라디언트 색상과 방사형 그라디언트 색상으로 구분됩니다.
선형 그래디언트: 대략 두 단계로 나누어집니다. 여기서는 캔버스의 두 가지 새로운 기능이 사용됩니다.
1단계: 새로운 함수 createLinearGradient(xstart,ystart,xend,yend);var 선형Grad = context.createLinearGradient(xstart,ystart,xend,yend); 사용
여기에는 4개의 매개변수가 있습니다. 이들은 각각 xstart, ystart, xend, Yend로 두 개의 좌표를 형성하며, 이 두 좌표는 선분을 형성합니다. 이 선분은 실제로 그라데이션 선입니다. 그라데이션 선은 그라데이션의 방향과 크기를 정의하는 데 사용됩니다.
두 번째 단계: 이 그라데이션 선을 기반으로 colorStop을 추가합니다. 이 메서드는 addColorStop(stop, color)이라고 합니다. 여기에는 stop과 color라는 두 가지 매개변수가 있습니다. 첫 번째 매개변수는 키 색상의 위치를 결정하는 데 사용되는 부동 소수점 값입니다. 두 번째 매개변수는 키 색상의 색상을 결정하는 데 사용됩니다. 선형Grad.addColorStop(중지,색상);
이 두 단계를 완료한 후 LinearGrad 변수를 fillStyle로 이 속성에 전달할 수 있습니다.
코드를 살펴보세요:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width,initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>선형 그래디언트</title></head><body> <canvas id=canvas style=border: 1px solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas); ; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); //컨텍스트 그리기 환경을 가져옵니다. context.createLinearGradient(0, 0, 800, 600); //그라디언트 선의 시작 좌표는 (0,0)이고 끝 좌표는 (800,600)입니다.linearGrad.addColorStop(0.0, '#000') // 첫 번째 매개변수는 키 색상의 위치를 나타내며, 0은 시작 위치, 1은 종료 위치, 두 번째 매개변수는 키 색상의 색상을 나타냅니다. LinearGrad.addColorStop(1.0, '#fff'); context.fillStyle =linearGrad; context.fillRect(0, 0, 800, 600) } else { Alert('브라우저가 캔버스를 지원하지 않습니다. 브라우저를 변경해 보세요~ ') } }</script>표현:
LinearGrad 변수를 생성한 후 ColorStop을 추가하고 여러 개를 추가할 수 있습니다.
예를 들어:
암호:
var LinearGrad = context.createLinearGradient(0, 0, 800, 600); //그라디언트 선의 시작 좌표는 (0,0)이고 끝 좌표는 (800,600)입니다.linearGrad.addColorStop(0.0, '#fff') ; 선형Grad.addColorStop(0.25, '#FB3'); '#690'); 선형Grad.addColorStop(0.75, '#09C');
표현:
또한 우리가 정의한 그라데이션 선은 기울어져 있으며 가로 또는 세로로 정의할 수도 있습니다. 그라데이션 선의 끝 좌표만 수정하면 됩니다. 수평 그라데이션을 만드는 코드를 살펴보세요.
var LinearGrad = context.createLinearGradient(0, 0, 800, 0);
표현:
수직 그라데이션 색상:
var LinearGrad = context.createLinearGradient(0, 0, 800, 0);
표현:
수평으로 기울어졌든 수직으로 기울어졌든 상관없이 우리가 하는 일은 캔버스 전체를 통과합니다. 그렇다면 그라데이션 선이 캔버스의 일부에만 할당되면 어떤 효과가 있을까요? 수정해보자
var LinearGrad = context.createLinearGradient(0, 0, 400, 300);
표현:
마찬가지로 우리가 만드는 그라데이션 선도 이 캔버스의 최대 너비와 높이를 초과할 수 있습니다. 수정해보자
var LinearGrad = context.createLinearGradient(-200, -100, 1000, 800);
표현:
또한 우리가 그리는 채워진 모양이 반드시 전체 캔버스를 차지하지 않을 수도 있습니다. 우리가 정의한 모양을 임의로 조정할 수 있습니다. 이 채워진 모양은 우리가 정의한 그라데이션 선에서 적절한 채우기 색상을 찾아서 채웁니다. 예를 들어:
var LinearGrad = context.createLinearGradient(-200, -100, 1000, 800);
표현:
방사형 그래디언트: 선형 그래디언트와의 차이점은 방사형 그래디언트가 방사형 그래디언트를 정의한다는 것입니다. 이 방사형 그라데이션은 두 개의 동심원을 기준으로 정의됩니다. 두 점 사이에 정의되는 선형 그래디언트와는 다릅니다.
방사형 그래디언트를 완료하려면 두 단계도 필요합니다.
1단계: 새로운 함수 createRadialGradient(x0,y0,r0,x1,y1,r1)를 사용합니다. 매개변수는 6개입니다. 처음 세 개의 매개변수는 첫 번째 링의 좌표와 반경을 정의하고, 마지막 세 개의 매개변수는 두 번째 링의 좌표와 반경을 정의합니다. 전체 방사형 그라데이션은 이 두 원 사이에서 발생합니다. var RadialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
2단계: 선형 그래디언트와 동일하므로 자세히 소개하지 않겠습니다. RadialGrad.addColorStop(stop,color);
코드는 선형 그래디언트 코드와 매우 유사합니다. 여기에서는 createRadialGradient가 사용되었습니다. createRadialGradient(300,300,0,300,300,500) 매개변수는 캔버스 중앙에서 반경이 0인 점을 정의합니다. 마지막 세 개의 매개변수는 캔버스 중앙에 반경 500의 큰 원을 정의합니다. 이는 점에서 바깥쪽으로 방사형 그라데이션을 정의합니다. 코드를 살펴보세요
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width,initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>방사형 그래디언트</title></head><body> <canvas id=canvas style=border: 1px solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas); ; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); context.createRadialGradient(300, 300, 0, 300, 300, 500); RadialGrad.addColorStop(0.0, '#fff'); '); RadialGrad.addColorStop(0.75, '#09C'); 귀하의 브라우저는 캔버스를 지원하지 않습니다. 브라우저를 변경해 보세요~') } }</script>표현:
매개변수를 변경하여 어떤 다른 효과가 있는지 확인할 수 있습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.