几个属性

  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. UITextField的使用小技巧

    [tf setValue:[UIColor redColor] forKeyPath:@"_placeholderLabel.textColor"];//修改placeHolder ...

  2. 51Nod--1006 lcs

    1006 最长公共子序列Lcs 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). ...

  3. POJ 1151 Wormholes spfa+反向建边+负环判断+链式前向星

    Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 49962   Accepted: 18421 Descr ...

  4. BP算法从原理到python实现

    BP算法从原理到实践 反向传播算法Backpropagation的python实现 觉得有用的话,欢迎一起讨论相互学习~Follow Me 博主接触深度学习已经一段时间,近期在与别人进行讨论时,发现自 ...

  5. 基于UDP协议的socket编程

    UDP协议特点: 1.无连接.服务端与客户端传输数据之前不需要进行连接,且没有超时重发等机制,只是把数据通过网络发送出去.也正是因为此特点,所以基于UDP协议的socket的客户端在启动之前不需要先启 ...

  6. python中csv文件的读取问题

    在python读取csv格式的文件时,使用csv.reader读取文件对象,出现了line contains NULL byte的错误,如下: reader = csv.reader(open(fil ...

  7. 《跟我学IDEA》一、下载安装idea，设置背景字体编码，配置JDK

    写在前面的话:作为一个在IT界摸爬滚打6年+的老程序员,我属于会的东西多而杂,但是没有任何一样精通的.曾经自己也认真过,蹉跎过,最近和别的同事朋友聊天时,突然发现自己得到的东西却很少很少,于是想认真的 ...

  8. 【luogu P1471】方差

    https://www.luogu.org/problem/show?pid=1471 一眼就能看出是线段树/树状数组题目了. 求平均不用说,线段树/树状数组维护区间和即可. 方差怎么求?先变换下方差 ...

  9. Jarvis OJ - [XMAN]level1 - Writeup——简单shellcode利用

    100分的pwn 简单查看一下,果然还是比较简单的 放到ida中查看一下,有明显的溢出函数,并且在函数中打印出了字符串的地址,并且字符串比较长,没有NX保护 所以我们很容易想到构造shellcode, ...

  10. 手动搭建express框架

    创建相应的文件夹 在根路径下创建package.json文件并在命令面板里安装相应的模块包(如下) 2.  在根路径下创建app.js, 在根路径下创建routes文件夹,并在文件夹中创建index. ...