Html5 Canvas 예비 연구 노트(9) - 그라데이션

이번 글에서는 html5의 그리기 효과를 계속 소개합니다. 이전 소개와 다르게, 이번 글에서 소개한 그라데이션은 이전에 소개한 상태값이 아닙니다fillStyle 값입니다. 먼저 예를 살펴보겠습니다.

코드는 다음과 같습니다.

var gradient = context.createLinearGradient(50,50,150,150);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

이는 선형 그래디언트입니다. 먼저 createLinearGradient를 통해 선형 그래디언트를 만듭니다. 4개의 매개변수는 시작점의 가로 및 세로 좌표입니다. 끝점의 가로, 세로 좌표를 입력하고 두 점에 색상 값을 추가한 후 addColorStop의 0이 시작점입니다. point, 1은 끝점이고 두 번째 매개변수는 색상이며 rgb 또는 일 수 있습니다. RGB.

이전은 선형 그래디언트와 호형 그래디언트입니다.

코드는 다음과 같습니다.

var gradient = context.createRadialGradient(50,50,5,150,150,10);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

createRadialGradient처음 세 매개변수는 시작 원 중심의 수평 및 수직 좌표와 원의 반경입니다. 마지막 세 개의 매개변수는 다음과 같습니다: 끝점 원의 중심 좌표와 원의 반경.

원형 그라데이션을 사용하면 중앙부터 그라데이션을 그릴 수 있습니다.

코드는 다음과 같습니다.

var gradient = context.createRadialGradient(100,100,0,100,100,72);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

시작점과 끝점은 사각형의 중심이고 반경은 서로 다릅니다.

위 내용은 Html5 Canvas 예비 학습노트(9) - Gradient 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!