该文章是由e良师益友技术部小陈原创作品，转载是请注明来源，谢谢！

今天我给大家介绍一下在HTML5中怎样实现Canvas阴影效果，我们知道现在HTML5的Canvas阴影也经常使用的，这个就是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>

在HTML5中怎样实现Canvas阴影效果的更多相关文章

  1. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  2. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  3. HTML5中的canvas基本概念及绘图

    * Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...

  4. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  5. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

  6. HTML5中video标签与canvas绘图的使用

    video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档): domo01 <!DOCTYPE html> <html lang=&quo ...

  7. HTML5中Canvas概述

    一.HTML5 Canvas历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget).在Canvas出现之前,开发人员若 ...

  8. HTML5中canvas介绍

    1.什么是Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签 canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D ...

  9. H5_0009：关于HTML5中Canvas的宽、高设置问题

    关于HTML5中Canvas的宽.高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸): 方法一:        <canvas widt ...

随机推荐

  1. X64 Win7（win2008）连接SqlServer2005慢的解决办法

    问题描述:数据库版本:SQL SERVER 2005数据库安装环境: Win 2003 X64 客户端环境:Win 2008 x64连接工具:ODBC或ado.net测试连接时间:4-6秒 客户端环境 ...

  2. Xcode8中Swift3.0适配问题

    写在前面 收到一些小伙伴的来信,觉得可能下边没有表达清楚,先把大家关心的要点在此进行总结,有兴趣的可以看看下边的研究过程,没兴趣的直接看这段即可. Xcode8支持Swift2.3和Swift3.0两 ...

  3. 也来一篇关于Infragistics WPF Report的使用教程 (一)

    前言 Infragistics Report是一款比較灵活的报表控件, 比微软的rdlc控件至少在页面打印上, 页面的控制比較好调整. 这里使用的是Infragistics Ultimate  v14 ...

  4. fedora 20 注销

    当系统只有一个用户和只有一个桌面环境时,Fedora 20将不会显示Log Out菜单. 如果你确实需要logout,可以通过执行gnome-session-quit命令来logout. 如果你确实需 ...

  5. android151 笔记 3

    34. 对android虚拟机的理解,包括内存管理机制垃圾回收机制. 虚拟机很小,空间很小,谈谈移动设备的虚拟机的大小限制 16M , 谈谈加载图片的时候怎么处理大图片的,压缩. 垃圾回收,没有引用的 ...

  6. du 和 df命令的区别（超赞）

    du和df命令都被用于获得文件系统大小的信息:df用于报告文件系统的总块数及剩余块数,du -s /<filesystem>用于报告文件系统使用的块数.但是,我们可以发现从df命令算出的文 ...

  7. iOS UIButton加在window上点击无效果问题

    UIButton加在window上,点击没有效果,找了很久,原来是没有加上这名:[self.window makeKeyAndVisible]; self.window = [[UIWindow al ...

  8. Java（Android）编程思想笔记01：多态性的理解

    1. 多态的定义: 指允许不同类的对象对同一消息做出响应.即同一消息可以根据发送对象的不同而采用多种不同的行为方式. (发送消息就是函数调用)   2. 多态的理解    多态是面向对象的重要特性,简 ...

  9. Android（java）学习笔记70：同步中的死锁问题以及线程通信问题

    1. 同步弊端: (1)效率低 (2)如果出现了同步嵌套,就容易产生死锁问题 死锁问题及其代码 : (1)是指两个或者两个以上的线程在执行的过程中,因争夺资源产生的一种互相等待现象 (2)同步代码块的 ...

  10. 最简单好用的SSO - 能经得起几万并发用户的SSO 组件使用方法介绍

    项目中使用了通用权限管理系统,该系统集成了单点登录功能,下面我来介绍下该单点登录实现的一些细节. 首先我们来看看其登录接口,系统本身支持各种登录方式: 1.公司名.用户名.密码 2.唯一账号.密码 3 ...