HTML5 캔버스 진보적 충전 및 이미지 마스크 효과의 투명 구현

댓글 :이 기사는 캔버스에서 투명성의 설정과 사용을 자세히 소개합니다. 점진적인 충전 및 투명성 지원을 결합하면 이미지의 마스크 효과를 실현할 수 있습니다. 선형 프로그레시브 메소드 코드 데모는 다음과 같습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 모든 사람에게 도움이되기를 바랍니다.

1 : 그라디언트 채우기

캔버스는 두 가지 증분 충전 방법을 지원하며, 하나는 선형 증분 충전 (라인 그라디언트 채우기)이고 다른 하나는

방사형 그레이드 채우기. 그들의 API는 다음과 같습니다.

Createlineargradient (x1, y1, x2, y2);

여기서 X1과 Y1은 ​​첫 번째 점의 좌표이고 X2 및 Y2는 두 번째 지점의 좌표입니다.

Createradialgradient (x1, y1, r1, x2, y2, r2);

여기서 X1 및 Y1은 첫 번째 중심 지점의 좌표이고 R1은 반경이고, X2 및 Y2는 두 번째 중심점의 좌표이고 R2는 반경입니다.

각 지점에 대한 색상을 설정하십시오

AddColorStop (위치, 색상);

위치는 위치, 크기 범위 [0 ~ 1], 여기서 0은 첫 번째 점을 나타내고 1은 두 번째 지점의 좌표를 나타냅니다.

색상은 CSS의 색상 값, 색상 값을 나타냅니다.

프로그레시브 채우기 객체가 생성되고 구성된 후에는 컨텍스트의 뇌졸중식 및 FillStyle 구현 텍스트를 설정하는 데 사용될 수 있습니다.

기하학적 모양의 점진적인 색상 채우기.

선형 진보적 접근의 코드 데모 :

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. 수평 (x) 방향 색상 진행

// 수평/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 : 투명

캔버스의 투명성 지원은 글로벌 및 로컬 투명성 설정으로 나뉩니다. 글로벌 투명성 설정을 통해 설정할 수 있습니다

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);

두 효과는 동일합니다.

셋째 : 사진의 투명하고 점진적인 마스크 효과

방사형 색상 구배 및 투명성 변경을 사용하여 이미지에 대한 반투명 마스크 효과와 스크립트 실행 효과를 달성합니다.

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 = 방사형 그레이드;

ctx.fill ();

}