댓글 :이 기사는 주로 캔버스 그림자 효과가 구현 된 HTML5의 예를 소개합니다.
HTML5에서 캔버스 그림자 효과를 구현하십시오
<! 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>