HTML5 Canvas阴影用法演示

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);

效果如下：

阴影文字：

只要设置shadowOffsetX与shadowOffsetY的值，当值都正数时，阴影相对文字的右下

方偏移。当值都为负数时，阴影相对文字的左上方偏移。

3D拉影效果：

在同一位置不断的重复绘制文字同时改变shadowOffsetX、shadowOffsetY、shadowBlur

的值，从小到大不断偏移不断增加，透明度也不断增加。就得到了拉影效果文字。

边缘模糊效果文字：

在3D拉影效果的基础上在四个方向重复，就得到了边缘羽化的文字效果。

运行效果：

程序代码：

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

转载请注明

HTML5 Canvas阴影用法演示的更多相关文章

  1. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  2. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  3. html5 canvas基本用法

    通过对canvas的初步了解,经过几天的总结,吧canvas的基本用法总结如下:方便以后查阅 <!doctype html> <html> <head> <m ...

  4. 提高HTML5 canvas性能的几种方法

    简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...

  5. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  6. html5 canvas程序演示--P1197 [JSOI2008]星球大战

    html5 canvas程序演示--P1197 [JSOI2008]星球大战 <!doctype html> <html> <head> <meta char ...

  7. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  8. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  9. 简介 jCanvas：当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

随机推荐

  1. Ural 1197 - Lonesome Knight

    The statement of this problem is very simple: you are to determine how many squares of the chessboar ...

  2. Python 2.7 学习笔记 基本知识

    python是一种解释型的.面向对象的.带有动态语义的高级程序设计语言.本文介绍下python的基本知识. 一.安装 各种操作系统有自己的安装方法,linux系统一般都自带了python的环境.这里不 ...

  3. Python关键字yield详解以及Iterable 和Iterator区别

    迭代器(Iterator) 为了理解yield是什么,首先要明白生成器(generator)是什么,在讲生成器之前先说说迭代器(iterator),当创建一个列表(list)时,你可以逐个的读取每一项 ...

  4. 红黑树和AVL树的实现与比较-----算法导论

    一.问题描述 实现3种树中的两种:红黑树,AVL树,Treap树 二.算法原理 (1)红黑树 红黑树是一种二叉查找树,但在每个结点上增加一个存储位表示结点的颜色,可以是red或black.红黑树满足以 ...

  5. QTP实践总结

    QTP实践总结 查询数据库修改freq 1.Testcasetable创建查询select * from testcasetable order by fseq desc 2.设计表-选项-修改自动递 ...

  6. PHP - 四级单词lrc文件解析为txt

    原始文件: 转换后文件: php代码: 首先根据需要更改文件路径. 转换后存放的文件要事先创建,为txt文件. 核心代码:正则表达式替换: <?php header('Content-type: ...

  7. 解决打包时IsCmdBld.exe出错的问题

    1.查看环境变量是否配置了 2.查看是否是使用administrator登陆的,要求使用administrator登陆否则可能会出现权限不足的现象

  8. Android-onInterceptTouchEvent()和onTouchEvent()总结

    老实说,这两个小东东实在是太麻烦了,很不好懂,我自己那api文档都头晕,在网上找到很多资料,才知道是怎么回事,这里总结一下,记住这个原则就会很清楚了: 1.onInterceptTouchEvent( ...

  9. QWidget类中默认是忽略inputMethodEvent事件（要获取输入的内容就必须使用这个事件）

    因为项目的需要以及主管的要求,准备将工程移植到Qt中,这样就可以比较容易的实现跨平台了.因为之前工程是在windows下开发的,第一个平台又是mobile所以除了底层框架之外其他的都是使用的windo ...

  10. UPC 2959: Caoshen like math 这就是个水题

    http://acm.upc.edu.cn/problem.php?id=2959 这就是个水题,之所以要写这个题是感觉很有纪念意义 用力看就是盲……23333333333333333 这个题就是最小 ...