이미지 마스크 효과를 달성하기 위한 HTML5 Canvas 점진적 채우기 및 투명도_html5 튜토리얼 기술

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

1: Gradient Fill(Gradient Fill)
Canvas는 두 가지 점진적 채우기 방식을 지원하는데, 하나는 Line Gradient Fill(Line Gradient Fill)이고 다른 하나는
입니다. 방사형 그라데이션 채우기입니다. 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) 방향 색상 그래디언트

복사 코드

코드는 다음과 같습니다.

// 수직/Y 방향
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. >

코드 복사코드는 다음과 같습니다.

//horizontal/X 방향
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 방향)

코드 복사코드는 다음과 같습니다.

// 수직 및 수평 방향
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을 통해 색상 값에 알파 값 채널
을 설정하면 로컬 투명도를 얻을 수 있습니다. 두 메서드의 코드는 다음과 같습니다.
// 전역 알파 값 변경
ctx.globalAlpha=0.5
ctx.fillRect(50,50,75,50)// 변경 채우기 스타일 색상의 알파채널
ctx.fillStyle = 'rgba(225,225,225,0.5)'
ctx.fillRect(50,50,75,50)
두 가지 효과는 동일합니다.


3: 사진 투명 그라데이션 마스크 효과
방사형 색상 그라데이션 및 투명도 변경을 사용하여 이미지에 반투명 마스크 효과 달성, 스크립트 실행 효과:

코드 복사코드는 다음과 같습니다.

var myImage = document.createElement('img');
myImage.src = "../test.png";
myImage.onload = function() {
ctx.drawImage(myImage, 80, 30, myImage.naturalWidth, myImage.naturalHeight);
var RadialGradient = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 10, canvas.width/2, canvas.height/2, 200);
radialGradient.addColorStop(0, 'rgba(247, 247, 247, 0)');
radialGradient.addColorStop(0.7, 'rgba(120, 120, 120, 0.5)');
radialGradient.addColorStop(0.9, 'rgba(0, 0, 0, 0.8)');
radialGradient.addColorStop(1, 'rgba(238, 238, 238, 1)');
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, 300, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = RadialGradient;
ctx.fill();
}