该文章是由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. Swift计算属性

    除存储属性外,类.结构体和枚举可以定义计算属性,计算属性不直接存储值,而是提供一个 getter 来获取值,一个可选的 setter 来间接设置其他属性或变量的值. struct Point { va ...

  2. pt-online-schema-change原理解析 博客相关需要阅读

    xiaoboluo768  http://www.lai18.com/user/481193.html   都说pt-toolkit工具集中的pt-online-schema-change可以在线不锁 ...

  3. 进程间通信之XSI IPC

    XSI IPC源自于系统V的IPC功能. 有三种IPC我们称作XSI IPC,即消息队列.信号量以及共享存储器,它们之间有很多相似之处. 1.标识符和键 每个内核中的IPC结构(消息队列.信号量或共享 ...

  4. Spark on Yarn遇到的问题及解决思路

    原文:http://www.aboutyun.com/thread-9425-1-1.html 问题导读1.Connection Refused可能原因是什么?2.如何判断内存溢出,该如何解决?扩展: ...

  5. PHP下获取上个月、下个月、本月的日期(strtotime,date)

    今天写程序的时候,突然发现了很早以前写的获取月份天数的函数,经典的switch版,但是获得上月天数的时候,我只是把月份-1了,估计当时太困了吧,再看到有种毛骨悚然的感觉,本来是想再处理一下的,但是一想 ...

  6. Scala Error: error while loading Suite, Scala signature Suite has wrong version expected: 5.0 found: 4.1 in Suite.class

    准备给scala项目引入单元测试 <dependency> <groupId>org.scalatest</groupId> <artifactId>s ...

  7. RabbitMQ+PHP 消息队列环境配置

    参考文档:http://www.cnblogs.com/phpinfo/p/4104551...http://blog.csdn.net/historyasamirror/ar... 依赖包安装 yu ...

  8. 1、netlink 连接器 通信机制

    使用netlink之前,先参考一下资料:http://www.ibm.com/developerworks/cn/linux/l-connector/ netlink通信机制介绍:资料来源 linux ...

  9. windows系统-web渗透工具-AWVS

    windows系统-web渗透工具-AWVS ACUNETIX WEB VULNERABILITY SCANNER(AWVS) Awvs是一款很出名的web安全扫描器,属于windows系统平台下最流 ...

  10. Josephina and RPG

    Josephina and RPG Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...