HTML5 Canvas 프로그레시브 채우기 및 투명도 구현 이미지 마스크 효과

이 기사에서는 Canvas의 투명도 설정 및 사용에 대해 자세히 설명합니다. 점진적 채우기와 투명도 지원을 결합하여 이미지의 마스크 효과를 구현하는 데 관심이 있는 친구들은 다음과 같습니다. 모두에게 도움이 되었으면 좋겠습니다. 도움말

HTML5 Canvas의 점진적 채우기 사용, Canvas의 투명도 설정 및 사용에 대해 자세히 설명하고 점진적 채우기와 투명도 지원을 결합하여 구현합니다. 이미지의 마스크 효과.

1: 그라데이션 채우기
Canvas는 두 가지 점진적 채우기 방법을 지원합니다. 하나는 선형 그라데이션 채우기(선 그라데이션 채우기)이고 다른 하나는
방사형 그라데이션 채우기(방사형 그라데이션 채우기)입니다. API는 다음과 같습니다.
createLinearGradient(x1, y1, x2, y2);
여기서 x1, y1은 첫 번째 점의 좌표이고 x2, y2는 두 번째 점의 좌표입니다.
createRadialGradient(x1, y1, r1, x2, y2, r2);
여기서 x1, y1은 첫 번째 중심점의 좌표이고, r1은 반지름이고, x2, y2는 두 번째 중심점의 좌표이고, r2는 반경.
각 점의 색상을 설정합니다
addColorStop(position, color);
position은 위치를 나타내고 크기 범위는 [0~1]이며 0은 첫 번째 점을 나타내고 1은 두 번째 점 좌표를 나타냅니다.
Color는 색상 값을 나타냅니다. , 모든 CSS 색상 값.
점진적 채우기 객체가 생성 및 구성된 후 컨텍스트의 획스타일 및 채우기 스타일을 설정하여 텍스트를 구현하는 데 사용할 수 있습니다.
기하학적 모양의 점진적인 색상 채우기.

선형 그래디언트 방식의 코드 시연:

1. 세로(Y) 방향 색상 그라데이션

// vertical/Y direction 
var lineGradient = ctx.createLinearGradient (50, 0, 50, 200); 
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); 
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); 
ctx.fillStyle = lineGradient; 
ctx.fillRect(0, 0, 300, 300);

2. (X) 방향 색상 그라데이션

// horizontal/X direction 
var lineGradient = ctx.createLinearGradient (0, 50, 200, 50); 
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); 
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); 
ctx.fillStyle = lineGradient; 
ctx.fillRect(0, 0, 300, 300);

3. 동시에(XY 방향) 색상이 점진적으로 진행됩니다.

// vertical and horizontal direction 
var lineGradient = ctx.createLinearGradient (0, 0, 200, 200); 
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); 
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)'); 
ctx.fillStyle = lineGradient; 
ctx.fillRect(0, 0, 300, 300);

2: 투명도(투명)
Canvas의 투명도 지원은 글로벌 투명도 설정과 로컬 투명도 설정으로 구분됩니다.
설정을 통해 글로벌 투명도 설정을 구현할 수 있습니다. Context.globalAlpha. fillStyle을 통해 색상 값에 알파 값 채널
을 설정하면 로컬 투명도를 얻을 수 있습니다. 두 가지 방법에 대한 코드는 다음과 같습니다.

// change global alpha value 
ctx.globalAlpha=0.5; 
ctx.fillRect(50,50,75,50);

// change fill style color's alphachannel 
ctx.fillStyle = 'rgba(225,225,225,0.5)'; 
ctx.fillRect(50,50,75,50);

두 가지 효과는 동일합니다.

3 모든 분들의 학습에 도움이 될 것입니다. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!

위 내용은 HTML5 Canvas 프로그레시브 채우기 및 투명도 구현 이미지 마스크 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!