该文章是由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. vector<int> v2 = 42; 为何非法

    C++ Primer 第四版,第十三章“复制控制” 习题13.2,为何vector<int> v2 = 42; 不能编译? 百度贴吧里的一位楼主给出了答案,本人认为正确,特此引用: 参考链 ...

  2. JavaScipt call和apply用法

    转:http://www.cnblogs.com/wupeng/p/3477879.html Javascript call与apply记录 [注]:记录自己对javascript中call与appl ...

  3. redo log write和flush

    http://bbs.chinaunix.net/thread-1753130-1-1.html 在事务提交时innobase会调用ha_innodb.cc 中的innobase_commit,而in ...

  4. 数据库插入某些数据会变成？，或则select无法读出数据库中的某些数据

    如果你想在数据库中插入“uɷ”,这个字符,直接插入 insert into table value (‘uɷ’),是不行的,这样插入的后果是打开数据后会显示为u?.当你面对这个问题的时候是不是第一个想 ...

  5. "jobTracker is not yet running"(hadoop 配置)

    今天自己尝试做配置了一下hadoop,环境是ubuntu13.10+jdk1.7.0_51+hadoop version1.2.1. 主要过程主要参考http://blog.csdn.net/hitw ...

  6. 3905 - Meteor

    The famous Korean internet company nhn has provided an internet-based photo service which allows The ...

  7. 【gradle报错】error: package org.apache.http does not exist

    导入项目的时候gradle报错 error: package org.apache.http does not exist 解决方法: 在build.gradle中加入 android {   use ...

  8. [OM]Dropship SO(直发/直运订单)的流程

    What are the advantages of Drop Shipment Orders? These are the benefits: No inventory is required Re ...

  9. 关于64位Linux编译hadoop2

    Apache官方提供hadoop2的安装包是在32位机器下编译的,生产环境一般使用64的Linux,那么需要在64位机器下重新编译可以查看hadoop-2.2.0-src下的BUILDING.txtB ...

  10. 开源IDE CodeBlocks的下载安装、配置、简单编程

    如果没有集成开发环境(IDE),在linux下开发程序将非常繁琐,IDE是指将编辑.编译.调试等功能集成在一个桌面环境上,这样就大大方便了用户.IDE一般包括代码编辑器.编译器.调试器和图形界面用户工 ...