几个属性

  1. shadowOffsetX:阴影的横向位移量。
  2. shadowOffsetY:阴影的纵向位移量。
  3. shadowColor:阴影的颜色。
  4. shadowBlur:阴影的模糊范围。

属性说明

  1. shadowOffsetX，shadowOffsetY默认值为零
  2. shadowBlur属性是可选的。如果你不希望阴影的边缘太清晰，需要将阴影的边缘模糊化时使用该属性。设定该属性值时必须设定为比零大的数字，否则将被忽略。一般设定在0-10之间。

例：绘制五角星

<!DOCTYPE html>

<html>

<head>

	<title>给图形绘制阴影</title>

	<script type="text/javascript">

function draw(id) {

	var canvas = document.getElementById(id);

	if(canvas == null)

		return false;

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

	context.fillStyle = "#eeeeff";

	context.fillRect(0,0,400,300);

	context.shadowOffsetX = 10;

	context.shadowOffsetY = 10;

	context.shadowColor = 'rgba(100,100,100,0.5)';

	context.shadowBlur = 7.5;

	//图形绘制

	context.translate(0,0);

	for (var i = 0; i < 3; i++) {

		context.translate(60,50);//偏的方向

		creat5Star(context);

		context.fill();

	};

}

function creat5Star(context) {

	var n = 0;

	var dx = 0;

	var dy = 0;

	var s = 50;

	//创建路径

	context.beginPath();

	context.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);

		context.lineTo(dx+x*s,dy+y*s);

	};

	context.closePath();

}	</script>

</head>

<body onload="draw('canvas');">

    <h1>canvas元素示例</h1>

    <canvas id="canvas" width="400" height="300"></canvas>

</body>

</html>

HTML5 给图形绘制阴影(绘制五角星示例)的更多相关文章

  1. HTML5 Canvas ( 图形的阴影 ) shadowColor, shadowOffsetX, shadowOffsetY, shadowNlur

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

  2. Matlab绘图基础——其他三维图形（绘制填充的五角星）

    其他三维图形 %绘制魔方阵的三维条形图 subplot(2,2,1); bar3(magic(4));   %以三维杆图形式绘制曲线y=2sin(x) subplot(2,2,2); y=2*sin( ...

  3. iOS：quartz2D绘图（给图形绘制阴影）

    quartz2D既可以绘制原始图形,也可以给原始图形绘制阴影. 绘制阴影时,需要的一些参数:上下文.阴影偏移量.阴影模糊系数 注意:在drawRect:方法中同时调用绘制同一个图形时,在对绘制的图形做 ...

  4. Canvas 给图形绘制阴影

    /** * 图形绘制阴影 */ function initDemo6() { var canvas = document.getElementById("demo6"); if ( ...

  5. HTML5 绘制阴影

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

  6. html5--5-15 绘制阴影

    html5--5-15 绘制阴影 实例 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  7. iOS的阴影绘制及性能优化

    今天来讲讲iOS开发过程中的阴影绘制及其潜在的绘图性能问题.虽然在开发过程中,我们使用阴影功能的机会不是很多,但是如果用了,有可能引起如卡顿等性能问题,所以,还是有必要来探究一下阴影的绘制过程,及如何 ...

  8. 借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制

    原文:借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制 本文所示例子是借助第三方设计软件,制作复杂的矢量图形,转成与XAML酷似的SVG,再转换成xaml而实现的. 这 ...

  9. OpenGL（一）绘制圆、五角星、正弦曲线

    OpenGL入门之"顶点":OpenGL规定,一个多边形必须是一个"凸多边形",即连接多边形上任意两点,其连线都在多边形内部.多边形可以由其边上的端点(这里可称 ...

随机推荐

  1. CDH5.11..0安装

    1.参考: http://www.cnblogs.com/codedevelop/p/6762555.html grant all privileges on *.* to 'root'@'hostn ...

  2. js 事件冒泡和事件捕获

    事件流:指的是网页中元素接受事件的顺序,它是一个概念,而不是具体的实际的东西 事件冒泡:指的是内层元素的事件,会触发包含着此元素的外层元素的事件,触发的顺序是:由内而外的 例如: <!DOCTY ...

  3. ##4.Glance 镜像服务-- openstack pike

    ##4.Glance 镜像服务 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##.Glance 镜像服务.txt ...

  4. SEO是件贼有意思的事情 golang入坑系列

    这两天迷上了SEO.真心看不起百度的竞价排名,但作为一个商业网站,赚钱是一件无可厚非的事情.只做活雷锋,没有大金主是做不长的.做完功课后,发现百度和google的SEO策略又不相同,几乎是无法通用.百 ...

  5. 2017最新PHP经典面试题目汇总（上篇）

    1.双引号和单引号的区别 双引号解释变量,单引号不解释变量 双引号里插入单引号,其中单引号里如果有变量的话,变量解释 双引号的变量名后面必须要有一个非数字.字母.下划线的特殊字符,或者用{}讲变量括起 ...

  6. 如何用九条命令在一分钟内检查Linux服务器性能？

    一.uptime命令 这个命令可以快速查看机器的负载情况.在Linux系统中,这些数据表示等待CPU资源的进程和阻塞在不可中断IO进程(进程状态为D)的数量.这些数据可以让我们对系统资源使用有一个宏观 ...

  7. 76、django之内置Admin

    本篇导航: 配置路由 定制Admin Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contrib.auth django ...

  8. JAVA字符串转换MD5值

    简介: MD5即Message-Digest Algorithm 5(信息-摘要算法5),用于确保信息传输完整一致.是计算机广泛使用的杂凑算法之一(又译摘要算法.哈希算法),主流编程语言普遍已有MD5 ...

  9. Javascript 进阶 面向对象编程 继承的一个样例

    Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承.这篇使用一个样例来展示js怎样面向对象编程.以及怎样基于类实现继承. 1. ...

  10. hdu 5305 friends

    每一次比赛的时候脑子都卡顿, 这次更离谱,我居然二进制枚举边,这么大的复杂度.而且剪不了枝 后来学长说着是道爆搜.搜每一条边.恍然大悟. 仅仅须要剪掉点的度数是奇数的时候,或者他的线上朋友或线下朋友大 ...