几个属性

  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. PHP使用api的两种方法

    1.用file_get_contents()函数 $params = array('key' => '8d284859d04cfeeea6b0771f754adb49', 'location' ...

  2. 这是一篇关于：以时间表的形式来介绍Java如何演变至今，以及Java版本的一些特性的分享

    这是一篇关于:以时间表的形式来介绍Java如何演变至今,以及Java版本的一些特性的分享: Java版本,功能和历史 原文[英]:https://javapapers.com/core-java/ja ...

  3. .NET作品集：linux下的博客程序

    博客程序架构 本博客程序是博主11年的时候参考loachs小泥鳅博客内核开发的.net跨平台博客cms,距今已有6年多了,个人博客网站一直在用,虽然没有wordpress那么强大,但是当时在深究.ne ...

  4. 前端测试框架Jest系列教程 -- 简介

    写在前面: 随着互联网日新月异的发展,用户对于页面的美观度,流畅度以及各方面的体验有了更高的要求,我们的网页不再是简单的承载文字,图片等简单的信息传递给用户,我们需要的是更加美观的页面展示,更快的浏览 ...

  5. PHP如何强制下载文件

    很多网站都需要做文件下载的功能.如果直接给连接的方式下载的话有很多的弊处...因为有时候需要对下载权限的检查,对下载次数的检查.所以一般采用php的方法进行安全下载.但是下载的时候如果是txt jpg ...

  6. 利用KindEditor实现公司通讯录的维护

    引言: 本人所属施工单位,在建项目较多,通讯录是以项目为单位挂接在公司内部网站通讯录板块,以静态页面展示.一直以来都是项目部办公室通过电话.邮件等方式通知总部信息部门变更通讯录,日常维护的工作量较大. ...

  7. Sun 与 Oracle 合并的未来

    引言 SUN 2008 初 10 亿美元收购 MySQL Oracle 2009 年 4 月 74 亿美元收购 SUN Sun 与 Oracle 合并的未来 1,如果云计算对企业来说变得越来越重要,那 ...

  8. day3、Linux快捷键及vim命令快捷键

    Linux命令行快捷键 快捷键: tab键  自动补全路径 目录  名字,  自动不全命令 快捷键: ctrl +l(小写) 清屏 . ctrl +c 取消当前操作 快捷键: ctrl +d(小写) ...

  9. Java 中 for each

    格式: for(type element: array) {       System.out.println(element); } //ex:{ public static void main(S ...

  10. Android OpenGL ES(八)----纹理编程框架

    1.把纹理载入进OpenGL中 我们的第一个任务就是把一个图像文件的数据载入到一个OpenGL的纹理中. 作为開始.让我们又一次舍弃第二篇的框架.又一次创建一个程序,新建一个util工具包,在该包下创 ...