HTML5 Canvas阴影使用方法实例演示


Posted in HTML / CSS onAugust 02, 2013

HTML5 Canvas中提供了设置阴影的四个属性值分别为:
context.shadowColor = “red” 表示设置阴影颜色为红色
context.shadowOffsetX = 0表示阴影相对TEXT的水平距离,0表示两者水平位置重合
context.shadowOffsetY = 0表示阴影相对TEXT的垂直距离,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);
效果如下:
HTML5 Canvas阴影使用方法实例演示 
阴影文字:
只要设置shadowOffsetX与shadowOffsetY的值,当值都正数时,阴影相对文字的右下
方偏移。当值都为负数时,阴影相对文字的左上方偏移。
3D拉影效果:
在同一位置不断的重复绘制文字同时改变shadowOffsetX、shadowOffsetY、shadowBlur
的值,从小到大不断偏移不断增加,透明度也不断增加。就得到了拉影效果文字。
边缘模糊效果文字:
在3D拉影效果的基础上在四个方向重复,就得到了边缘羽化的文字效果。
运行效果:
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 Clip Demo - By Gloomy Fish</h1>
<pre>Fill And Stroke Clip</pre>
<div id="my_painter">
<canvas id="text_canvas"></canvas>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 #HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 #HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 #HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 #HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 #HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 #HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 #HTML / CSS
You might like
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
javascript自执行函数
2017/02/10 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
Python文件和目录操作详解
2015/02/08 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
python实现图像识别功能
2018/01/29 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
质检部职责
2013/12/28 职场文书
文艺演出策划方案
2014/06/07 职场文书
班级团队活动方案
2014/08/14 职场文书
无房证明样本
2015/06/17 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
JavaScript流程控制(分支)
2021/12/06 Javascript