주석 : 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>
<헤드>
<meta http-equiv = "x-ua 호환"내용 = "chrome = ie8">
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<title> 캔버스 클립 데모 </title>
<link href = "default.css" />
<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>
<H1> HTML5 캔버스 클립 데모 - 우울한 물고기 </h1>
<pre> 채우기 및 스트로크 클립 </pre>
<div>
<canvas> </canvas>
</div>
</body>
</html>