HTML5 튜토리얼 : 캔버스 태그는 선형 그라디언트 그라디언트 그래픽을 그립니다

wulin.com의 기사 소개 (www.vevb.com) : HTML5 Daily Training Canvas 태그의 적용 - 선형 그라디언트 그래픽 그리기.

지금까지 캔버스를 사용하여 그래픽을 그리는 기본 지식이 소개되었습니다. 이 섹션에서 시작하여, 우리는 다른 고급 드로잉 지식 중 하나 인 선형 그라디언트를 소개합니다. 먼저 "HTML5 Daily Practice : Canvas 태그의 적용 - 드로잉 사각형"에 지정된 색상 FillStyle을 검토해 봅시다. 선형 그라데이션을 그리면 새로운 객체 인 선형 그레이드 객체를 사용하고 그래프 컨텍스트 객체의 Createlineargradiend 메소드를 사용하여 객체를 작성해야합니다. 이 방법의 정의는 다음과 같습니다.

context.createlineargradient (Xstart, Ystart, Xend, Yend);

Xstart : 그라디언트 시작점의 수평 축

Ystart : 그라디언트 시작점의 수직 좌표

Xend : 그라디언트 엔드 포인트 가로 축

yend : 그라디언트 엔드 포인트의 수직 좌표

이 방법을 사용하면 두 좌표 지점을 사용하는 선형 그레이드 객체가 생성됩니다. 그라디언트 색상은 어떻게 설정되어야합니까?

선형 그레이드 객체를 전달한 후 AddColorStop 메소드를 사용하여 설정합니다. 이 방법의 예는 다음과 같습니다.

context.addcolorstop (오프셋, 색상);

이 방법을 사용하여 두 가지 매개 변수가있는 그라디언트의 색상을 추가하십시오.

오프셋 : 그라디언트 출발점을 떠나는 색상의 0-1 사이의 부동 소수점 번호의 오프셋은 그라디언트의 시작점에서 색상을 오프셋으로 설정합니다.

색상 : 색상은 그림을 설정하는 데 사용됩니다

AddColorStop 방법에서 오프셋 파라미터의 그림