该文章是由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. HomeSnap

    http://arnauddegiuli.github.io/HomeSnap/ OnBufferingUpdateListener https://github.com/LuckyJayce/Mat ...

  2. 安卓高手之路之 ClassLoader

    我不喜欢那些泛泛而谈的去讲那些形而上学的道理,更不喜欢记那些既定的东西.靠记忆去弥补思考的人,容易陷入人云亦云的境地,最后必定被记忆所围困,而最终消亡的是创造力.希望这个高手之路系列能够记录我学习安卓 ...

  3. 框架使用的技术主要是SpringMVC 在此基础上进行扩展

    框架使用的技术主要是SpringMVC 在此基础上进行扩展 1 Web前端使用 2 前段控制器采用SpringMVC零配置 3 IOC容器Spring 4 ORM使用 Mybites或者hiberna ...

  4. uva216 c++回溯法

    因为题目要求最多8台电脑,所以可以枚举全排列,然后依次计算距离进行比较,枚举量8!=40320并不大,但这种方法不如回溯法好,当数据再大一些枚举就显得笨拙了,所以这个题我用回溯法做的,回溯有一个好处是 ...

  5. 获取文件属性信息之stat、fstat和lstat

    UNIX文件系统是目录和文件组成的一种层次结构.目录(directory)是一个包含许多目录项的文件,在逻辑上,可以认为每个目录项都包含一个文件名,同时还包含说明该文件属性的信息.文件属性是指文件类型 ...

  6. scala Option 里的 orNull orElse getOrElse 区别和使用

    Scala Option Scala Option类型用来表示一个值是可选的(有值或无值) Option[T] 是一个类型为 T 的可选值的容器: 如果值存在, Option[T] 就是一个 Some ...

  7. Maven学习小结(五 pom.xml详解[转])

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  8. 杂乱无章之Oracle（一）

    1. 设置共享池大小 SQL>ALTER  SYSTEM  SET  SHARED_POOL_SIZE=32M; 2. 数据库高速缓冲区(database  buffer  cache):SQL ...

  9. Android（java）学习笔记85：案例拨号程序

    手机拨号程序:(只有程序代码) package cn.itcast.phone; import android.app.Activity; import android.content.Intent; ...

  10. Android AdapterView 源码分析以及其相关回收机制的分析

    忽然,发现,网上的公开资料都是教你怎么继承一个baseadapter,然后重写那几个方法,再调用相关view的 setAdpater()方法, 接着,你的item 就显示在手机屏幕上了.很少有人关注a ...