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 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
html5 标签
Jul 16 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
详解Python的Django框架中的中间件
2015/07/24 Python
详解Python多线程
2016/11/14 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
python绘制立方体的方法
2018/07/02 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
abstract class和interface有什么区别
2013/08/04 面试题
汽车销售顾问求职自荐信
2014/01/01 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python