<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        #canvas{

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var cxt = canvas.getContext('2d');

    /**

     * 阴影

     * shadowColor: 阴影的颜色

     * shadowOffsetX: 横向偏移

     * shadowOffsetY: 纵向偏移

     * shadowNlur: 模糊程度

     */

    cxt.shadowColor = "red";

    cxt.shadowOffsetX = 20;

    cxt.shadowOffsetY = 20;

    cxt.shadowBlur = 0;

    cxt.fillRect(200, 200, 400, 200);

</script>

HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur的更多相关文章

  1. HTML5 给图形绘制阴影(绘制五角星示例)

    几个属性 shadowOffsetX:阴影的横向位移量. shadowOffsetY:阴影的纵向位移量. shadowColor:阴影的颜色. shadowBlur:阴影的模糊范围. 属性说明 sha ...

  2. HTML5 Canvas ( 图形的透明度和遮盖 ) globalAlpha, globalCompositeOperation

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 Canvas ( 图形变换矩阵 ) transform, setTransform

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. HTML5 Canvas ( 图形的像素操作 ) getImageData, putImageData, ImgData.data

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. HTML5☞canvas

    <canvas>便签用于绘制图像,图表.不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本JavaScript来完成实际的绘图任务.既然你 ...

  7. 玩转html5<canvas>画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

  8. html5 canvas的教程

    原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 原作很强悍 导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路 ...

  9. html5 canvas 详细使用教程 转

     分类: html5(9)  原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 原作很强悍 导航 前言 基本知识 绘 ...

随机推荐

  1. CTF-练习平台-WEB之 web2

    二.web2 打开连接发现... 在火狐浏览器里,按F12点击查看器就可以发现flag

  2. BZOJ4713 迷失的字符串

    分析 首先考虑只有一个串时的做法,可以进行背包dp,记\(f(i,j)\)表示从\(i\)的子树中某点出发到\(i\)能否匹配字符串的\(1 \dots j\)位且\(i\)与\(j\)匹配.同时记\ ...

  3. asp.net && javascript MD5加密

    /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as d ...

  4. Ribbon Status Bar

    https://documentation.devexpress.com/#WindowsForms/CustomDocument2498 官方文档说明 A Ribbon Status Bar (Ri ...

  5. 【转】Ubuntu添加PATH环境变量

    原文网址:http://www.cnblogs.com/pang123hui/archive/2011/05/28/2309889.html 添加分两种: 一.临时性添加 ~$ echo $PATH  ...

  6. c# list排序的三种实现方式 (转帖)

    用了一段时间的gridview,对gridview实现的排序功能比较好奇,而且利用C#自带的排序方法只能对某一个字段进行排序,今天demo了一下,总结了三种对list排序的方法,并实现动态传递字段名对 ...

  7. hadoop家族学习路线图之hadoop产品大全

    大数据这个词也许几年前你听着还会觉得陌生,但我相信你现在听到hadoop这个词的时候你应该都会觉得“熟悉”!越来越发现身边从事hadoop开发或者是正在学习hadoop的人变多了.作为一个hadoop ...

  8. iPhone激活策略说明

    本帖最后由 苏州汇东 于 2014-7-2 19:13 编辑 奉告各位封釉 千万不要泄露机器序列号IMEI号 远程ID真的可以上  只要机器上没有ID 就可以远程上任何ID 我这可以远程上ID 也帮忙 ...

  9. BASIC-14_蓝桥杯_时间转换

    示例代码: #include <stdio.h> int main(void){ int t = 0 , h = 0 , m = 0 , s = 0 ; scanf("%d&qu ...

  10. Qt5布局管理（三）——QStackedWidget堆栈窗口类

    转载:LeeHDsniper 实例效果如下图: 如上图,堆栈窗口左半部分是一个QListWidget对象,右半部分是分别是三个标签.通过点击左边不同的项目,可以使得右边的Lable进行切换. 具体的结 ...