HTML5 캔버스 그림자 사용 예제 데모

저자：Eve Cole 업데이트 시간：2025-04-15 09:16:01

주석 : HTML5 Canvas는 그림자 텍스트, 3D 그림자 풀 효과 및 Edge Blur Effect 텍스트를 실현하기 위해 그림자를 설정하기위한 4 가지 속성 값을 제공합니다. 특정 데모 코드는 다음과 같습니다. 배우고 싶은 친구는 그것을 언급 할 수 있습니다.

html5 캔버스는 그림자를 설정하기위한 네 가지 속성 값을 제공합니다.

context.shadowColor = 빨간색은 그림자 색상을 빨간색으로 설정하는 것을 의미합니다.

context.shadowoffsetx = 0은 텍스트에 대한 그림자의 수평 거리를 나타냅니다. 0은 두 오버랩의 수평 위치를 나타냅니다.

context.shadowoffsety = 0은 텍스트에 대한 그림자의 수직 거리를 나타냅니다. 0은 두 오버랩의 수직 위치를 나타냅니다.

context.shadowblur = 10 그림자 흐림 효과, 값이 클수록 흐려집니다.

가장 간단한 그림자 사각형 코드 중 하나는 다음과 같습니다.

Context.shadowColor = RGBA (127,127,127,1);

context.shadowoffsetx = 3;

context.shadowoffsety = 3;

context.shadowblur = 0;

context.fillstyle = rgba (0, 0, 0, 0.8);

Context.FillRect (10, HH+10, 200, Canvas.Height/4-20);

효과는 다음과 같습니다.

그림자 텍스트 :

Shadowoffsetx 및 Shadowoffsety의 값을 설정하면 두 값이 양수 일 때 섀도우는 텍스트의 오른쪽 하단과 관련이 있습니다.

제곱 오프셋. 모든 값이 음수이면 그림자는 텍스트의 왼쪽 상단에서 오프셋됩니다.

3D 그림자 풀링 효과 :

동일한 위치에서 반복적으로 그리는 텍스트를 반복하고 Shadowoffsetx, Shadowoffsety, ShadowBlur를 변경합니다.

끊임없이 소규모에서 크게 이동하는 가치는 지속적으로 투명성이 계속 증가하고 있습니다. 그런 다음 그림자 효과 텍스트를 얻었습니다.

에지 블러 효과 텍스트 :

3D 섀도우 풀 효과를 기반으로 4 방향으로 반복하면 에지 깃털의 텍스트 효과가 얻어집니다.

실행 효과 :

시퀀스 코드 :

<! doctype html>

<html>

<헤드>

<cript>

var ctx = null; // 글로벌 변수 2D 컨텍스트

var imagetexture = null;

Window.onload = function () {

var canvas = document.getElementById ( "text_canvas");

console.log (canvas.parentNode.clientWidth);

canvas.width = canvas.parentNode.clientWidth;

canvas.height = canvas.parentnode.clientHeight;

if (! canvas.getContext) {

Console.log ( "캔버스가 지원되지 않습니다. HTML5 호환 브라우저를 설치하십시오.");

반품;

}

var context = canvas.getContext ( '2d');

// 섹션 1- 그림자와 블러

Context.FillStyle = "Black";

context.fillRect (0, 0, canvas.width, canvas.height/4);

context.font = '60pt calibri';

context.shadowColor = "화이트";

context.shadowoffsetx = 0;

context.shadowoffsety = 0;

Context.shadowBlur = 20;

context.fillText ( "Blur Canvas", 40, 80);

context.strokestyle = "rgba (0, 255, 0, 1)";

context.linewidth = 2;

context.stroketext ( "블러 캔버스", 40, 80);

// 섹션 2- 그림자 글꼴

var hh = canvas.height/4;

Context.FillStyle = "White";

Context.FillRect (0, HH, Canvas.Width, Canvas.Height/4);

context.font = '60pt calibri';

Context.shadowColor = "RGBA (127,127,127,1)";

context.shadowoffsetx = 3;

context.shadowoffsety = 3;

context.shadowblur = 0;

context.fillstyle = "rgba (0, 0, 0, 0.8)";

context.fillText ( "Blur Canvas", 40, 80+HH);

// 섹션 3- 아래 그림자 효과

var hh = canvas.height/4 + hh;

Context.FillStyle = "Black";

Context.FillRect (0, HH, Canvas.Width, Canvas.Height/4);

for (var i = 0; i <10; i ++)

{

context.shadowColor = "RGBA (255, 255, 255," + ((10-i)/10) + ")";

context.shadowoffsetx = i*2;

context.shadowoffsety = i*2;

context.shadowblur = i*2;

Context.fillStyle = "RGBA (127, 127, 127, 1)";

context.fillText ( "Blur Canvas", 40, 80+HH);

}

// 섹션 4- 페이드 효과

var hh = canvas.height/4 + hh;

Context.FillStyle = "Green";

Context.FillRect (0, HH, Canvas.Width, Canvas.Height/4);

for (var i = 0; i <10; i ++)

{

context.shadowColor = "RGBA (255, 255, 255," + ((10-i)/10) + ")";

context.shadowoffsetx = 0;

context.shadowoffsety = -i*2;

context.shadowblur = i*2;

Context.fillStyle = "RGBA (127, 127, 127, 1)";

context.fillText ( "Blur Canvas", 40, 80+HH);

}

for (var i = 0; i <10; i ++)

{

context.shadowColor = "RGBA (255, 255, 255," + ((10-i)/10) + ")";

context.shadowoffsetx = 0;

context.shadowoffsety = i*2;

context.shadowblur = i*2;

Context.fillStyle = "RGBA (127, 127, 127, 1)";

context.fillText ( "Blur Canvas", 40, 80+HH);

}

for (var i = 0; i <10; i ++)

{

context.shadowColor = "RGBA (255, 255, 255," + ((10-i)/10) + ")";

context.shadowoffsetx = i*2;

context.shadowoffsety = 0;

context.shadowblur = i*2;

Context.fillStyle = "RGBA (127, 127, 127, 1)";

context.fillText ( "Blur Canvas", 40, 80+HH);

}

for (var i = 0; i <10; i ++)

{

context.shadowColor = "RGBA (255, 255, 255," + ((10-i)/10) + ")";

context.shadowoffsetx = -i*2;

context.shadowoffsety = 0;

context.shadowblur = i*2;

Context.fillStyle = "RGBA (127, 127, 127, 1)";

context.fillText ( "Blur Canvas", 40, 80+HH);

}

</스크립트>

</head>

<body>

<div>

</div>

</body>

</html>