给图形绘制阴影 -Canvas的基本操作

在HTML5中，使用canvas元素可以给图形添加阴影效果。添加阴影效果时
，只需利用图形上下文对象的几个关于阴影绘制的属性就可以了，如下所示：
shadowOffsetX ——阴影的横向位移量
shadowOffsetY——阴影的纵向位移量
shadowBlur ——阴影的模糊范围
shadowColor ——阴影的颜色
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距
离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表
示会往下或右延伸，他们默认都是 0。
shadowBlur 用于设定阴影的模糊程度，它表示图形阴影边缘的模糊范围。
如果不希望阴影的边缘太清晰，需要将阴影的边缘模糊化时可以使用该属性。
设定该属性值时必须要设定为比0大的数字，否则将被忽略。一般设定在0至
10之间，开发时可以根据情况调整这个数值，以达到满意效果。
shadowColor 用于设定阴影效果的延伸，值可以是标准的 CSS 颜色值，
默认是全透明的黑色。

<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">  
<title>为文字绘制阴影效果</title>  
<script >
function draw(id) {
	var context = document.getElementById('canvas').getContext('2d');
		context.shadowOffsetX = 2;
  		context.shadowOffsetY = 2;
  		context.shadowBlur = 2;
  		context.shadowColor = "rgba(0, 0, 0, 0.5)";
 
  		context.font = "30px Times New Roman";
  		context.fillStyle = "red";
  		context.fillText("珊瑚贝 shanhubei.com", 5, 30);
}
</script>  
</head>  
<body onload="draw('canvas');">  
<canvas id="canvas" width="400" height="300" />  
</body>  
</html>

猜你喜欢