这篇文章主要介绍了使用HTML5 Canvas绘制阴影效果的方法,包括一个3D拉影+边缘模糊效果文字的编写例子,在阴影效果的利用上进一步深入,需要的朋友可以参考下
创建阴影效果需要操作以下4个属性：
1.context.shadowColor：阴影颜色。
2.context.shadowOffsetX：阴影x轴位移。正值向右，负值向左。
3.context.shadowOffsetY：阴影y轴位移。正值向下，负值向上。
4.context.shadowBlur：阴影模糊滤镜。数据越大，扩散程度越大。
这四个属性只要设置了第一个和剩下三个中的任意一个就有阴影效果。不过通常情况下，四个属性都要设置。
例如，创建一个向右下方位移各5px的红色阴影，模糊2px，可以这样写。
context.shadowColor = red; context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur= 2;
需要注意的是，这里的阴影同其他属性设置一样，都是基于状态的设置。因此，如果只想为某一个对象应用阴影而不是全局阴影，需要在下次绘制前重置阴影的这四个属性。
运行结果：
阴影文字：
只要设置shadowOffsetX与shadowOffsetY的值，当值都正数时，阴影相对文字的右下
方偏移。当值都为负数时，阴影相对文字的左上方偏移。
3D拉影效果：
在同一位置不断的重复绘制文字同时改变shadowOffsetX、shadowOffsetY、shadowBlur
的值，从小到大不断偏移不断增加，透明度也不断增加。就得到了拉影效果文字。
边缘模糊效果文字：
在3D拉影效果的基础上在四个方向重复，就得到了边缘羽化的文字效果。
运行效果：
程序代码：
<!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 Clip Demo - By Gloomy Fish</h1>
<pre>Fill And Stroke Clip</pre>
<p id=my_painter>
<canvas id=text_canvas></canvas>
</p>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
html5 touch事件实现触屏页面上下滑动
在HTML5 Canvas中放入图片和保存为图片的方法
html5和js绘制图片到canvas的方法
以上就是使用HTML5 Canvas绘制阴影效果的方法的详细内容，更多请关注双恒网络其它相关文章！
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 使用HTML5 Canvas绘制阴影效果的方法
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 使用HTML5 Canvas绘制阴影效果的方法
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
