html5实现canvas阴影效果示例


Posted in HTML / CSS onMay 07, 2014

在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>

HTML / CSS 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 #HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 #HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 #HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 #HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 #HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 #HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 #HTML / CSS
You might like
PHP程序员编程注意事项
2008/04/10 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
python3让print输出不换行的方法
2020/08/24 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
高级销售员求职信
2013/10/25 职场文书
技校个人求职信范文
2014/01/25 职场文书
市场安全管理制度
2014/01/26 职场文书
残疾人小组计划书
2014/04/27 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
公司委托书格式范文
2014/10/09 职场文书
护士自荐信范文
2015/03/25 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
小学教师见习总结
2015/06/23 职场文书
教师理论学习心得体会
2016/01/21 职场文书
高中政治教师教学反思
2016/02/23 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android