<!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. centos下安装必要组件(相当于apt-get install install build-essential)

    在centos下执行 : sudo yum groupinstall 'Development Tools'

  2. layer关闭弹出层总结

    //关闭方法1 layer提供了5种层类型.可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层). 若你采用layer.open({type: 1})方式调用, ...

  3. HTML标签 select 里 动态添加option

    HTML标签 select 里 动态添加option: ☆ var today = new Date(); var yearNow = today.getFullYear(); var optiong ...

  4. Array.prototype.slice.call(arguments)探究

    Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组 首先,slice有两个用法,一个是String.slice,一个是Array.slic ...

  5. oracle C# 访问

    使用oracle的odp.net 进行oracle数据库的访问对于进行oracle数据库的开发来说是比较方便的,使用的方式与ADO.net 是一致的. 一下为使用的测试 1. 安装必要的oracle ...

  6. 监控Linux的Steps&Q&A

    spolight的下载地址:https://www.quest.com/spotlight-on-windows/ 问题1.sar -u 之后,只有一条记录.这种情况执行一下:sudo sar -d; ...

  7. redis 报错及解决

    报错: (error) MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persi ...

  8. Hanlp中文自然语言处理入门介绍

    自然语言处理定义: 自然语言处理是一门计算机科学.人工智能以及语言学的交叉学科.虽然语言只是人工智能的一部分(人工智能还包括计算机视觉等),但它是非常独特的一部分.这个星球上有许多生物拥有超过人类的视 ...

  9. Windows10更改网络类型-公用-专用

    1.Get-NetConnectionProfile 2. Set-NetConnectionProfile -Name "未识别的网络" -NetworkCategory Pri ...

  10. 静态编译opencv3.4.0

    问题: 编译了静态库之后可以不要那么多dll 解决办法: 其实和编译动态库的区别就在于: Cmake里面操作的时候,去掉下面这个选项的勾勾 BUILD_SHARED_LIBS