canvas学习（十一）：阴影

使用canvas绘制为图形添加阴影比较简单，主要是四个方法：

shadowColor：设置阴影颜色

 

shadowOffsetX：设置图形与阴影的水平距离，也是水平偏移量。当shadowOffsetX=0时，表示阴影位于形状的正下方，shadowOffsetX=20时表示阴影位于形状 left 位置右侧的 20 像素处，当shadowOffsetX=-20时表示阴影位于形状 left 位置左侧的 20 像素处。

 

shadowOffsetY：设置图形与阴影的垂直距离，也就是垂直方向的偏移量。当shadowOffsetY=0时表示阴影位于形状的正下方。当shadowOffsetY=20时表示阴影位于形状 top 位置下方的 20 像素处。当shadowOffsetY=-20时表示阴影位于形状 top 位置上方的 20 像素处。

 

shadowBlur：设置阴影的模糊级数，数字越大越模糊，越小越清晰。

这四个方法必须一起使用，不然达不到阴影的效果。

实例代码如下：

1、页面结构：

<canvas id="myCanvas" style="margin:50px;display:block;margin:0 auto;border:1px solid #aaa;">
	您的浏览器不支持canvas，请换个浏览器试试
	<!--这句话在支持canvas的浏览器中会被忽略，不支持的则会显示出来-->
</canvas>

 

2、JS实现：

window.onload=function(){
	var myCanvas = document.getElementById("myCanvas");
	if(myCanvas.getContext("2d")){
		myCanvas.width = document.documentElement.clientWidth-20;;
		myCanvas.height = document.documentElement.clientHeight-20;;
		var context =myCanvas.getContext("2d");
		
		context.fillStyle="#058";//填充色
		context.font="bold 120px Arial";//设置字体
		context.textAlign = "center";//水平居中
		context.textBaseline="middle";
		
		//向下的阴影
		context.save();
		//设置阴影的颜色:灰色
		context.shadowColor="gray";
		//设置阴影的偏移量，当都为正数时阴影在右边及下边，若为负数则在左边和上边
		context.shadowOffsetX=15;
		context.shadowOffsetY=15;
		//设置阴影的模糊度:数字越大越模糊，越小越清晰
		context.shadowBlur=5;
		context.fillText("CANVAS",myCanvas.width/2,myCanvas.height/3);
		context.restore();

		//向上的阴影
		context.save();
		context.shadowColor="gray";
		context.shadowOffsetX=-15;
		context.shadowOffsetY=-15;
		context.shadowBlur=10;
		context.fillText("CANVAS",myCanvas.width/2,myCanvas.height*2/3);
		context.restore();
	}else{
		return false;
	}
}

感谢老师的分享！