在HTML5中怎样实现Canvas阴影效果

来源:转载

 该文章是由e良师益友技术部小陈原创作品,转载是请注明来源,谢谢!  

今天我给大家介绍一下在HTML5中怎样实现Canvas阴影效果,我们知道现在HTML5的Canvas阴影也经常使用的,这个就是HTML5 Canvas阴影使用方法,在这里主要和大家分HTML5 Canvas阴影使用方法代码,可以适当的改变来达到自己想要的结果,下面就一起来看看详细的代码吧!

下面是代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="chrome=IE8">

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<title>Canvas Clip Demo</title>

<link href="default.css" rel="stylesheet" />

<script>

var ctx = null; // global variable 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("Canvas not supported. Please install a HTML5 compatible browser.");

return;

}

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

// section one - shadow and blur

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("Blur Canvas", 40, 80);

context.strokeStyle = "RGBA(0, 255, 0, 1)";

context.lineWidth = 2;

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

// section two - shadow font

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

// section three - down shadow effect

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

}

// section four - fade effect

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

}

}

</script>

</head>

<body>

<h1>HTML5 Canvas</h1>

<pre>Fill And Stroke Clip</pre>

<div id="my_painter">

<canvas id="text_canvas"></canvas>

</div>

</body>

</html>


分享给朋友:
------分隔线----------------------------
您可能感兴趣的文章:
随机阅读: