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拉影效果的基础上在四个方向重复，就得到了边缘羽化的文字效果。

运行效果：

程序代码：

Canvas Clip Demo

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

}

}

HTML5 Canvas Clip Demo - By Gloomy Fish

Fill And Stroke Clip

转载请注明

HTML5 Canvas动画效果演示

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

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

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

html5 canvas基本用法

通过对canvas的初步了解,经过几天的总结,吧canvas的基本用法总结如下:方便以后查阅

提高HTML5 canvas性能的几种方法

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

&lbrack;js高手之路&rsqb; html5 canvas系列教程 - 线形渐变&comma;径向渐变与阴影设置

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

html5 canvas程序演示--P1197 &lbrack;JSOI2008&rsqb;星球大战

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

HTML5 程序设计 - 使用HTML5 Canvas API

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

HTML5 Canvas绘制转盘抽奖

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

简介 jCanvas：当 jQuery遇上HTML5 Canvas

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

随机推荐

vim快捷键

#vim  filename :scriptname //查看vim加载了哪些脚本 :set nu //设置行号 :set tabstop=4 //设置一个tab为4个空格长度 :set ai //设 ...

使用SQLIO测试磁盘性能

SQLIO 是一个用于测试存储系统能力的命令行工具,用以获取存储系统相关的性能指标,以判断系统的 I/O 处理能力. 在微软的网站可以下载 SQLIO 的安装包,安装后目录中会出现如下文件: EULA ...

Guava - EventBus&lpar;事件总线&rpar;

Guava在guava-libraries中为我们提供了事件总线EventBus库,它是事件发布订阅模式的实现,让我们能在领域驱动设计(DDD)中以事件的弱引用本质对我们的模块和领域边界很好的解耦设计 ...

Android 学习笔记之Volley&lpar;八&rpar;实现网络图片的数据加载

PS:最后一篇关于Volley框架的博客... 学习内容: 1.使用ImageRequest.java实现网络图片加载 2.使用ImageLoader.java实现网络图片加载 3.使用NetWork ...

手动编译Jsp文件

手动模拟Tomcat编译jsp文件 Tomcat编译jsp文件的配置路径是在%tomcat_home%/conf/web.xml中,有这样一段代码

HDU-4737 A Bit Fun 维护

题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4737 题意:给一个数列a0, a1 ... , an-1,令 f(i, j) = ai|ai+1|ai ...

poj 2960 S-Nim(SG函数)

S-Nim Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 3694   Accepted: 1936 Description ...

(转载)教你在PHP中使用全局变量

(转载)http://www.chinaz.com/program/2009/0123/64261.shtml 即使开发一个新的大型PHP程序,你也不可避免的要使用到全局数据,因为有些数据是需要用到你 ...

1、roboguide新建工程文件

打开roboguide,软件界面如下,接下来讲解一下“打开和新建工程文件” 首先介绍一下新建工程文件,在工具栏中点击新建按钮或者在文件(file)的下拉菜单中点击新建工程文件(new cell),弹出 ...

MySql 游标笔记

delimiter &&create PROCEDURE findProjectDetailsByProjectId(in p_userId int)BEGIN   DECLARE d ...