<!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. hdu1160 dp

    hdu1160 题意:给出很多老鼠的数据,分别是它们的体重和跑速,为了证明老鼠越重跑得越慢,要找一组数据,由若干个老鼠组成,保证老鼠的体重依次增加而跑速依次减小,问这组数据最多能有多少老鼠,并按体重从 ...

  2. cf 557D 二分图黑白染色

    题意:给出一个 n 点 m 边的图,问最少加多少边使其能够存在奇环,加最少边的情况数有多少种 奇环和偶环其实就是二分图的性质:二分图不存在奇环,所以只要判断这张图是否是二分图就行了: 如果本身就不是二 ...

  3. （转） C++中成员初始化列表的使用

    C++在类的构造函数中,可以两种方式初始化成员数据(data member). 1,在构造函数的实现中,初始类的成员数据.诸如: class point{private: int x,y;public ...

  4. 自己一下午练习Js的代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 根据IP获得城市信息(百度API的运用)

    /**      * 根据IP获取城市      * @param string $ip ip地址      * @return array      * http://api.map.baidu.c ...

  6. oracle之 11.2.0.4 bbed安装

    一. bbed安装: 1.ORACLE 11G下安装BBED,需要从ORACLE 10G中复制三个包 sbbdpt.o .ssbbded.o 并将两个文件移到$ORACLE_HOME/rdbms/li ...

  7. vue-echarts-v3 使用

    github地址:https://github.com/xlsdg/vue-echarts-v3 官方说明:无论多少个组件代码里写 import IEcharts from 'vue-echarts- ...

  8. JUC锁之 框架

    根据锁的添加到Java中的时间,Java中的锁,可以分为"同步锁"和"JUC包中的锁". 同步锁 即通过synchronized关键字来进行同步,实现对竞争资源 ...

  9. Python 中的sort()排序

    v = [1, 3, 5, 2, 4, 6] v.sort() print(v) # [1, 2, 3, 4, 5, 6] v2 = [(1, 2), (2, 2), (2, 3), (3, 1)] ...

  10. centos7安装Hive2.3.0

    1.下载Hive2.3.0 wget http://mirror.bit.edu.cn/apache/hive/hive-2.3.0/apache-hive-2.3.0-bin.tar.gz 2.解压 ...