html5_html5 튜토리얼 기술에서 캔버스 그림자 효과 구현 예

HTML5에서 캔버스 그림자 효과 구현

코드 복사 코드는 다음과 같습니다. 캔버스 클립 데모 &lt ;link href="default.css" rel="stylesheet" /> var ctx = null; // 전역 변수 2d context 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 호환 브라우저를 설치하세요."); return; } var context = canvas.getContext('2d');

// 섹션 1 - 그림자 및 흐림 context.fillStyle="black"; context.fillRect(0, 0, canvas.width, canvas.height/4); context.font = '60pt Calibri';

context.shadowColor = "white"; context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.shadowBlur = 20; context.fillText("흐림 캔버스 ", 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("흐리게 캔버스" , 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; 나는 { 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("흐림 캔버스" , 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 { 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("흐림 캔버스", 40, 80 hh); } for( var 나는 = 0; 나는 { context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")"; context.shadowOffsetX = 0; 컨텍스트. ShadowOffsetY = i*2; context.shadowBlur = i*2; context.fillStyle = "RGBA(127, 127, 127, 1)"; context.fillText("흐림 캔버스", 40 , 80 hh); } for(var i = 0; 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("흐림 캔버스", 40, 80 hh); } for(var i = 0; 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("흐림 캔버스", 40, 80 hh); } }

&lt ;/script> HTML5 캔버스 채우기 및 획 클립