几个属性

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

属性说明

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

例：绘制五角星

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>给图形绘制阴影</title>
  5. 	<script type="text/javascript">
  6. function draw(id) {
  7. 	var canvas = document.getElementById(id);
  8. 	if(canvas == null)
  9. 		return false;
  10. 	var context = canvas.getContext('2d');
  11. 	context.fillStyle = "#eeeeff";
  12. 	context.fillRect(0,0,400,300);
  13. 	context.shadowOffsetX = 10;
  14. 	context.shadowOffsetY = 10;
  15. 	context.shadowColor = 'rgba(100,100,100,0.5)';
  16. 	context.shadowBlur = 7.5;
  17. 	//图形绘制
  18. 	context.translate(0,0);
  19. 	for (var i = 0; i < 3; i++) {
  20. 		context.translate(60,50);//偏的方向
  21. 		creat5Star(context);
  22. 		context.fill();
  23. 	};
  24. }
  25. function creat5Star(context) {
  26. 	var n = 0;
  27. 	var dx = 0;
  28. 	var dy = 0;
  29. 	var s = 50;
  30. 	//创建路径
  31. 	context.beginPath();
  32. 	context.fillStyle = 'rgba(255,0,0,0.5)';
  33. 	var x = Math.sin(0);
  34. 	var y = Math.cos(0);
  35. 	var dig = Math.PI/5*4;//改变形状
  36. 	for (var i = 0; i < 5; i++) {
  37. 		var x = Math.sin(i*dig);
  38. 		var y = Math.cos(i*dig);
  39. 		context.lineTo(dx+x*s,dy+y*s);
  40. 	};
  41. 	context.closePath();
  42. }	</script>
  44. </head>
  45. <body onload="draw('canvas');">
  46.     <h1>canvas元素示例</h1>
  47.     <canvas id="canvas" width="400" height="300"></canvas>
  48. </body>
  50. </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. 配置KindEditor富文本编辑器

    第一步:首先我们要到KindEditor官网下载资源包-点击进入官网下载KindEditor资源包 第二部:在下载完了KindEditor的资源包后解压结构如下图所示: 里面包括集中语言的文件上传后台 ...

  2. 自己动手编写IOC框架（三）

    刚写博客浏览量第一天就有1000多人次,给了我很大的鼓舞决定熬夜再写一篇.对于前两篇来说无非就是使用dtd验证xml,然后解析xml,和IOC的核心还是差的很远,相信很多小伙伴们都感觉看得不过瘾了,这 ...

  3. 拆分字符and读取properties文件

    在方法里面建立properties对象 Properties pps = new Properties(); 调用.load()方法 pps.load(new FileInputStream(&quo ...

  4. 51Nod 1293 球与切换器 DP分类

    基准时间限制:1 秒 空间限制:131072 KB   有N行M列的正方形盒子.每个盒子有三种状态0, -1, +1.球从盒子上边或左边进入盒子,从下边或右边离开盒子.规则: 如果盒子的模式是-1,则 ...

  5. 匈牙利标记法定义ECMAScript变量前缀

    匈牙利标记法定义ECMAScript变量前缀 类型 前缀 示例 数组 a aArray 布尔型 b bMale 浮点型(数字)   f fTax 函数 fn fnSwap 整型(数字) i iAge ...

  6. python掉微信api

    # -*- coding:utf-8 -*-import requestsimport jsonimport sys# 企业号及应用相关信息corp_id = 'xxxx'corp_secret = ...

  7. wps 操作

    wps选择视图-->文档结构图

  8. oracle自己主动维护

    检查ORACLE自己主动维护任务是否关闭  SQL> select t.client_name, t.status from dba_autotask_client t;  CLIENT_NAM ...

  9. 彻底弄懂 JavaScript 执行机制

    本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定 ...

  10. ASP.MVC当URL跳转时候参数的安全性

    一个页面跳转到另外一个页面直接将参数写在URL上面并不安全比如 http://XXXXXXXXXXX/meeting/shakeGroup?id=5381&uid=o0En_sj1J0bFgI ...