HTML5 캔버스 드로잉 자습서 (4) - 구부러진 경로 및 그라디언트 색상 충전 방법

두 가지 일반적인 그리기 방법, 즉 충전과 스트로크가 있습니다. 이전 기사는 이미 뇌졸중 방법에 대해 이야기했습니다. 이 기사는 캔버스의 그래픽을 채우는 방법에 대해 이야기합니다.

채우기 ()가 매우 간단합니까? Strokestyle과 마찬가지로 Stroke Style을 나타내는 것처럼 FillStyle은 Fill 스타일을 나타냅니다.

ctx.fillstyle = 'color'; 기본 충전 스타일은 불투명 한 검은 색입니다

할 수 있다. 캔버스는 현재 경로의 종말점에서 시작점에 직접 연결 한 다음 채우게됩니다. 그림과 같이 :

그러나 마지막 단락에는 뇌졸중이 없다는 것을 알 수 있습니다.

이전 기사에서 우리는 4 줄의 사각형을 그렸지만 캔버스는 그렇게 나쁘지 않으며 직접 사각형을 직접 그리는 기능조차 없다는 것을 기억합니다. FillRect ()를 사용하여 직사각형으로 직접 채울 수 있습니다.

ctx.fillRect (x, y, 너비, 높이);

여기서 x와 y는 사각형의 왼쪽 상단 모서리의 시작점의 좌표를 참조하십시오.

FillRect에 대해 말하면, 우리는 Strokerect를 언급해야합니다. 당신은 그것을 바로 추측했습니다. 그것은 직사각형을 직접 스트로크하는 것을 의미합니다.

FillText 및 Stroketext도 있습니다. 기능에 관해서는, 당신은 그것을 추측했을 것입니다. 여기서는 이야기하지 않으므로 모두가 먼저 미리 볼 것입니다.

캔버스에서, 그라디언트 컬러는 선형 구배 및 방사형 구배의 두 가지 유형으로 나뉘며,이를 생성하는 방법도 독립적이다. 먼저 선형 그라디언트를 만드는 방법을 살펴 보겠습니다.

선형 그라디언트 = CreateLineargradient- 모양, 여전히 매우 직접적인 단어를 만듭니다. 그의 구문은 다음과 같습니다.

Createlineargradient (x1, y1, x2, y2)에는 4 개의 매개 변수가 있습니다! 그것은 너무 복잡해 보이지만 실제로 이것은 비행기 세계의 지점이 X 좌표와 y 좌표에 의해 결정된다고 이미 말했기 때문에 이것은 매우 간단합니다. 따라서 X1, Y1은 선형 구배의 출발점 좌표를 나타내고 X2, Y2는 종점 좌표를 나타냅니다.

이를 수행 할 때의 이점은 분명하며 경사 선형 구배를 만들려면 편리합니다. 그러나 먼저 수평 선형 구배를 만들어 봅시다.

var linear = ctx.createlineargradient (100,100,200,100); 그라디언트가 생성 된 것 같습니다. 그래서 우리는 그것을 채울 수 있습니까? -이 구배는 비어 있고 색상이 없습니다.

그라디언트 바에 색상을 추가하는 방법은 AddColorStop (위치, 색상)입니다. 그러나이 AddColorStop은 브러시에 추가되지 않고 그라디언트를 앞쪽으로 저장하는 변수에 추가됩니다. 나는 여기서 선형이다.

var linear = ctx.createlineargradient (100,100,200,100);

linear.addcolorstop (0, '#fff');

linear.addcolorstop (0.5, '#f0f');

linear.addcolorstop (1, '#333');

여기에 3 개의 AddColorStops를 사용했습니다. 이는 그라디언트 바에 3 가지 색상을 추가하는 것을 의미합니다.

이 시점에서 우리는 그라디언트 색상을 채울 수 있지만 먼저 정의 된 그라디언트를 FillStyle에 할당해야합니다.

var linear = ctx.createlineargradient (100,100,200,100);

linear.addcolorstop (0, '#fff');

linear.addcolorstop (0.5, '#f0f');

linear.addcolorstop (1, '#333');

ctx.fillstyle = 선형; // 스타일을 채우도록 기울기를 할당합니다

ctx.fillRect (100,100,100,100);

ctx.stroke ();

FillRect 및 Strokerect는 독립 경로를 그립니다. 예를 들어, 위의 코드에서, 스트로크는 충전 후 호출되며 방금 그린 사각형은 쓰다듬 지 않습니다. Strokerect도 마찬가지입니다.

테스트 후, 나는 매우 고통스러운 문제, 즉 선형 그라디언트의 좌표가 전체 캔버스 범위와 관련이 있음을 발견했습니다. 예를 들어, 여기서 선형 구배는 100,100에서 시작합니다. 사각형을 0,0으로 끌어 내고이 그라디언트로 채우면 채우기가 없다는 것을 알게 될 것입니다. 그라디언트의 범위가 단순히 사각형의 범위를 초과하기 때문입니다.

이것은 실제로 사기 설정입니다.

회의. 출발점의 색상은 시작점 색상이며, 종점 이후의 색상은 항상 엔드 포인트 색상입니다.

엔드 포인트 색상을 종료하는 방법은 엔드 색상 후에 투명한 엔드 색상을 채울 수 있습니다. 좋다:

linear.addcolorstop (0.99, '#333');

linear.addcolorstop (1, 'RGBA (51,51,51,0)');

이전 계획에 따르면, 나는 또 다른 기울어 진 선형 그라디언트를 구축하려고 노력할 것입니다. Createlineargradient의 매개 변수를 변경하십시오.

var linear = ctx.createlineargradient (100,100,200,200);

효과는 그림에 나와 있습니다.

그런 다음 방사형 구배 (원형 구배)를 사용해 보겠습니다. CreateLineargradient와 유사하게, 방사형 구배를 생성하는 방법은 Createradialgradient이지만 그 파라미터는 매우 다를 수 있습니다.

x1, y1, r1, x2, y2, r2)는 여전히 x1, y1, x2, y2가 여전히 출발점과 종말점을 나타내지 만, 시작점과 종료점은 원이며 x, y는 원의 중심의 좌표입니다. 따라서, R1 및 R2는 각각 시작점 원의 반경 및 종점 원의 반경이다. 그림과 같이 :

내 인상에서, 방사형 구배는 원이고 원의 중심이 시작점이고 원의 반경이 종말점 인 것 같습니다. 그러나 캔버스의 방사형 구배는 실제로 다릅니다. 출발점은 원이고 끝점은 원이며, 내 이해와 다릅니다.

가장 간단한부터 시작하겠습니다. 먼저, 매우 일반적인 방사형 구배를 만들 수 있습니다. 즉, 그라디언트 원의 중심은 그라디언트의 출발점입니다. 일반 방사형 구배로 인해 중심은 원의 중심이며, 왜곡을 피해야합니다. 그렇다면 엔드 원의 중앙을 시작 원의 중심과 겹치겠습니다.

var radial = ctx.createradialgradient (55,55,10,55,55,55); // 해당 중심 좌표

radial.addcolorstop (0, '#fff');

radial.addcolorstop (0.5, '#ff0');

radial.addcolorstop (0.9, '#555');

radial.addcolorstop (1, '#f00');

방사형 구배 시작점 및 엔딩 서클 중심 좌표는 동일하지만, 출발점 원의 반경은 10이고 엔드 포인트 원의 반경은 55입니다. 마지막 방사형 구배 범위는 너비와 높이가 110이며, 그 구배 범위가 끝 점 원의 범위를 기준으로 함을 나타냅니다.

(엔드 서클 범위 외부에는 여전히 색상이 있음을 알 수 있으며이 색상은 엔드 색상입니다. 그러나 Radial.AddColorStop (1.5, '#0f0')을 사용하려고하면 구배 범위 외부의 색상을 정의하려면 여전히 오류가 수신됩니다).

그렇다면 출발점 원의 반경을 사용하는 것은 무엇입니까? - 정상적인 방사형 그라디언트의 중심 (심장의 변화라고 부르겠습니다 ...)은 원이 아닌 요점입니다. 사실, 우리는 옳습니다. 이 시작점 원은 ​​점과 같지만 비교적 클 수 있습니다.

시작 원의 반경을 매우 크게 만들고 끝 원의 반경에 가깝게 만들어 봅시다.

var radial = ctx.createradialgradient (55,55,50,55,55,55); // 매우 가깝습니다

다른 컬러 스톱은 변경되지 않은 상태로 유지되며 그래픽은 다음과 같습니다.

다시 말해, 캔버스에서 방사형 구배의 시작 색상은 시작 원의 범위 외부에서 그려지고 시작 원의 전체 색상은 시작 색상입니다.

출발점 원의 반경을 0으로 설정하겠습니다. 방사형 구배 중심 변경이 실제로 포인트입니다.

대부분의 경우, 우리는 매우 공식적인 방사형 구배가 필요하지 않지만 대신 아래 그림과 유사하게 심장의 변화가 상쇄되기를 바랍니다.

현재 캔버스의 방사형 구배의 두 원의 장점이 나옵니다. 출발점 원과 엔드 포인트 원의 중심이 겹치지 않는 한, 심장의 변화도 변할 것입니다.

var radial = ctx.createradialgradient (75,75,0,55,55,55); 그러나 현재 그라디언트 범위는 여전히 엔드 원의 범위입니다.

많은 사람들이 파괴의 정신으로 태어납니다. 예를 들어, 여기서, 끝 원의 반경은 항상 시작 원보다 크지 만, 반전되면 어떻게됩니까?

var radial = ctx.createradialgradient (75,75,55,55,55,0);

테스트 후 오류는 없지만 내부에서 외부로의 원래 그라디언트는 외부에서 내부로 그라디언트로 바뀌 었습니다. 이것은 그것을 사용하는 좋은 방법입니다.

또 다른 문제가 있습니다. 시작 원의 중심을 바꾸면 시작 원의 범위가 끝 원의 범위를 초과하면

현재는 어떻게됩니까?

아! ? 상황은 무엇입니까? !

이 상황은 시작 원과 끝 원이 부분적으로 겹치는 경우에 발생합니다. 따라서 정상적인 방사형 구배가 필요한 경우 원 중 하나가 다른 원을 완전히 둘러싸십시오.

또한, 그라디언트는 FillStyle에 할당 될 수 있으므로 뇌졸중에 할당 할 수도 있습니다. 당신은 그 효과를 알고 있습니다.