该文章是由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. Android使用百度定位SDK 方法及错误处理

    之前我的项目中的位置定位使用的是基站方法,使用的Google提供的API,但是前天中午突然就不返回数据了,到网上搜了一下才知道,Google的接 口不提供服务了,基于时间紧迫用了百度现有的SDK,但是 ...

  2. class、classLoader的getResourceAsStream的区别

    1.class.getResourceAsStream() 从源码中可以看出他也是调用ClassLoader的getResourceAsStream() public InputStream getR ...

  3. JS 操作 radio input（cc问卷管理）

    1.选中特定的单选按钮 function showDetail(content){ $("input[name^='radio']").removeAttr("check ...

  4. VirtualBOX 虚拟机安装 OS X 10.9 Mavericks 及 Xcode 5，本人X220亲测

    原文链接:http://bbs.weiphone.com/read-htm-tid-7625465.html 建议电脑要求    Windows 7/8, 32 / 64 bit    CPU Int ...

  5. 用PC浏览器模拟手机浏览器（一）：无扩展版

    想浏览手机版,打开对应网址却跳转到PC版?怎么办? 下面咱们来说下在只是安装了浏览器,无需其他安装操作的情况下来怎么用PC浏览器模拟手机浏览器,然后访问手机站点. 浏览器众多,IE系列的咱就不考虑了, ...

  6. STL之heap

    STL的堆操作 STL里面的堆操作一般用到的只有4个:make_heap();.pop_heap();.push_heap();.sort_heap(); 他们的头文件函数是#include < ...

  7. 使用socket实现信用卡程序和迷你购物商城

    #-*- coding:utf-8 -*- from moudle import * import socketserver import json import os import time imp ...

  8. [Android]应用的前后台运行

    在开发中,你是不是没有抽象一个出常用的类,那你可能要为你的懒惰付出很大的代价.要时刻记得自己的工具箱,不断往里面添加一些小小玩意.今天就给大家带来一个很有意思的例子.前后台运行!! 在Android开 ...

  9. [未完成]关于Eclipse4RCP书中内容总结

    原文地址http://www.vogella.com/tutorials/EclipseRCP/article.html Table of Contents 1. Eclipse 4 1.1. Wha ...

  10. 【模拟，时针分针秒针两两夹角】【没有跳坑好兴奋】hdu - 5387 （多校#8 1008）

    算是最好写的一道题了吧,最近模拟没手感,一次过也是很鸡冻o(*￣▽￣*)o 注意事项都在代码里,没有跳坑也不清楚坑点在哪~ #include<cstdio> #include<cst ...