HTML5 给图形绘制阴影(绘制五角星示例)

几个属性

  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>
posted @ 2017-03-07 14:48  叫我小红依吧  阅读(408)  评论(0)  编辑  收藏  举报