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动画animation实现云彩向左滚动
May 09 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
phplot生成图片类用法详解
2015/01/06 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python 字符串只保留汉字的方法
2018/11/16 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python 伯努利分布详解
2020/02/25 Python
python实现IOU计算案例
2020/04/12 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
财务分析个人的自荐书范文
2013/11/24 职场文书
音乐专业自荐信
2014/02/07 职场文书
小学教师师德感言
2014/02/10 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
室内设计专业自荐信
2014/05/31 职场文书
2014年班务工作总结
2014/12/02 职场文书
三年级学生评语大全
2014/12/26 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript