几个属性

  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. 《Linux命令行与shell脚本编程大全》第十九章 初识sed和gawk

    这两个工具能够极大简化需要进行的数据处理任务. 19.1 文本处理 能轻松实现自动格式化.插入.修改或删除文本元素的简单命令行编辑. sed和gawk就具备上述功能 19.1.1 sed编辑器 被称为 ...

  2. JDK1.7中HashMap底层实现原理

    一.数据结构 HashMap中的数据结构是数组+单链表的组合,以键值对(key-value)的形式存储元素的,通过put()和get()方法储存和获取对象. (方块表示Entry对象,横排表示数组ta ...

  3. Elasticsearch中Head插件的使用

    在学习Elasticsearch的过程中,必不可少需要通过一些工具查看es的运行状态以及数据.如果都是通过rest请求,未免太过麻烦,而且也不够人性化.此时,head可以完美的帮助你快速学习和使用El ...

  4. Codeforces 830C On the Bench

    题意:给你n个数,问有多少种排列方式使得任意两个相邻的数的乘积都不是完全平方数 我好弱,被组合和数论吊着打... 首先我们可以把每个数中固有的完全平方数给分离出来,那么答案其实就只与处理后的序列相关. ...

  5. 【NOIP2009提高组】最优贸易

    https://www.luogu.org/problem/show?pid=1073 如果他想在i点卖出,那么就要在从1点出发到i点的路径里找个最便宜的买入,用Bellman-Ford求出这样最便宜 ...

  6. while(true)应用 之 实现自己的消息队列

    早些时候,一直有个疑问,就是比如你从前端发一个操作之后,后台为什么能够及时处理你的东西呢?当然了,我说的不是,服务器为什么能够立即接收到你的请求之类高大上的东西.而是,假设你用异步去做一个事情,而后台 ...

  7. [乐意黎原创] cuteftp 9 显示中文乱码

    当用FTP连接空间时.中文命名的文件名称会显示乱码,原来是编码设置错误．怎么改动呢? 改动方法例如以下: 选择. 工具--> 全局选项->传输: 1. 传输方法: ASCII 2. SFT ...

  8. 有关JS控制时间的几个小Demo

    一.Document自带的定时和延时方法:  循环运行:var timeid = window.setInterval("方法名或方法"."延时");windo ...

  9. ZOJ ACM 1204 (JAVA)

    毕业好几年了,对算法还是比較有兴趣,所以想又一次開始做ACM题.俺做题比較任意,一般先挑通过率高的题来做. 第1204题,详细描写叙述请參考,ZOJ ACM 1204 1)难度分析 这个题目,基本的难 ...

  10. 在Docker中运行asp.net core 跨平台应用程序

    概述 Docker已经热了有一两年了,而且我相信这不是一个昙花一现的技术,而是一个将深远影响我们日后开发和部署.运营应用系统的一种创新(很多人将其作为devops的一种非常重要的基石).学习docke ...