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 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 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
ZF等常用php框架中存在的问题
2008/01/10 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
小程序实现分类页
2019/07/12 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
django数据库自动重连的方法实例
2019/07/21 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
村委会主任先进事迹
2014/01/15 职场文书
小学教研工作制度
2014/01/15 职场文书
保险专业自荐信范文
2014/02/20 职场文书
起诉书范文
2015/05/20 职场文书
音乐会主持人开场白
2015/05/28 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技