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.οnlοad=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;
	}
}
      

感謝老師的分享！