几个属性
- shadowOffsetX:阴影的横向位移量。
- shadowOffsetY:阴影的纵向位移量。
- shadowColor:阴影的颜色。
- shadowBlur:阴影的模糊范围。
属性说明
- shadowOffsetX，shadowOffsetY默认值为零
- 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>