案例1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function draw(){
            var c=document.getElementById("myCanvas");
            var cxt= c.getContext("2d");
            cxt.fillStyle="#eeeeff";
            cxt.fillRect(0,0,400,320);

            cxt.shadowOffsetX=10;
            cxt.shadowOffsetY=10;
            cxt.shadowColor='rgba(100,100,100,0.5)';
            cxt.shadowBlur=7.5;

            cxt.translate(60,60);
            for( var i=0;i<6;i++)
            {
                cxt.translate(50,50);
                cxt.scale(0.8,0.8);
                cxt.rotate(Math.PI/10);
                createStar(cxt);
                cxt.fill();
            }

            function createStar(cxt){
                var n=0;
                var dx=0;
                var dy=0;
                var s=50;
                cxt.beginPath();
                cxt.fillStyle='rgba(255,0,0,0.5)';
                var x=Math.sin(0);
                var y=Math.cos(0);
                var dig=Math.PI/5*4;
                for(var i=0;i<5;i++)
                {
                    var x=Math.sin(i*dig);
                    var y=Math.cos(i*dig);
                    cxt.lineTo(dx+x*s,dy+y*s);
                }
                cxt.closePath();
            }

        }
    </script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持
</canvas>

</body>
</html>

效果图：

注释：
（1）shadowOffsetX--阴影的横向位移量，即图形横向方向移动的距离；
         shadowOffsetY--阴影的纵向位移量，即纵向方向移动的距离；
         shadowColor--阴影的颜色；
         shadowBlur--阴影的模糊范围，该属性是可选的。如果不希望阴影的边缘太清晰，需要将阴影的边缘模糊化时可以使用该属性。属性值一般设定在0-10之间；

HTML5画布（阴影）的更多相关文章

  1. 使用HTML5画布（canvas）生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  2. HTML5 Canvas阴影用法演示

    HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...

  3. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  4. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  5. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  6. html5画布基础

    canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...

  7. HTML5 画布参考

    描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...

  8. HTML5画布实现方法：

    我们可以在HTML中使用属性width和height来定义Canvas.但是实现Canvas的相关功能主要还依赖于Javascript实现,即HTML5 Canvas API.我们使用javascri ...

  9. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

随机推荐

  1. C程序设计语言练习题1-22

    练习1-22 编写一个程序,把较长的输入行”折“成短一些的两行或多行,折行的位置在输入行的第n列之前的最后一个非空格之后.要保证程序能够智能地处理输入行很长以及在制定的列前没有空格或制表符时的情况. ...

  2. HTML资源（推荐）

    W3C在线验证工具:http://validator.w3.org/ (X)HTML嵌套规则:http://www.cnblogs.com/PeunZhang/archive/2012/03/11/2 ...

  3. C语言整数按照二进制逆序，输出逆序后的整数值

    问题来源,今天早上和一舍友吃早餐的时候谈到的一个问题,将一个整数按照二进制逆序,然后输出逆序后的数值. 我们知道数值在内存中都是以二进制的形式存放的,假如我们是32位机,每8位为一个字节,int型在3 ...

  4. ubuntu下wine打开自由们找不到MFC42.DLL重新安装的解决方法

    一直在找ubuntu下的X墙工具,看到大部分的都是ssh和tor的,但是tor下载不到,找了很多方法,没有办法,只能用FG了.但是Fg是运行在windows系统下的程序. 只好再安装一遍wine,用终 ...

  5. 摇滚吧HTML5！Jsonic超声波前端交互！

    前些年吹过一阵canvas制作html5游戏的东风,相信不少同学重温了一把高中物理课本上的牛顿定律.时光如梭,你是否还记得牛顿定律后面一章的各种机械波的物理定律?环视四周,光纤.wifi.蓝牙.广播都 ...

  6. 【转】Linux 中断学习之小试牛刀篇

    原文网址:http://www.linuxidc.com/Linux/2011-02/32129.htm 前言 在前面分析了中断的基本原理后,就可以写一个内核中断程序来体验以下,也可以借此程序继续深入 ...

  7. 【转】用串口登录Beaglebone Black、用usb共享电脑网络、内核模块的本地编译

    原文网址:http://bbs.eeworld.com.cn/thread-431507-1-1.html 串口连接BBB使用usb线可以连接BBB和电脑,用ssh就可以登录BBB来进行操作.但有时候 ...

  8. bzoj3995[SDOI2015]道路修建

    http://www.lydsy.com/JudgeOnline/problem.php?id=3995 线段树维护连通性. 我们发现,对于一个区间[L,R],我们只需要知道(1,L),(2,L),( ...

  9. 生成excel内存溢出问题的解决方式

    常用的excel生成工具包括jxl.poi.但二者都存在一个问题:生成excel需要大量的消耗内存.如果一次性往excel中写入的数据足够的多将导致内存溢出. 1.数据写入excel为什么会大量的消耗 ...

  10. MD中bitmap源代码分析--入题概述

    在MD模块中,各级raid都使用的一份bitmap的源码,也就是说共用一种bitmap的流程,下面以raid1的使用为例来分析bitmap的工作原理. 在使用raid1磁盘阵列的时候,对于数据的可靠性 ...