HTML5 - canvas : shadow & globalAlpha

HTML

<canvas id="myCanvas" width="340" height="200"></canvas>

JQuery 1.9.1

$(function(){
  var ctx=$('#myCanvas')[0].getContext('2d');
  ctx.rect(10,10,100,100);//繪製一個正方形。
  ctx.fillStyle='#E9EA6B';//給予填色。
  ctx.shadowColor="#B7A766";//設定陰影顏色。
  ctx.shadowBlur=10;//設定陰影霧化程度。
  ctx.shadowOffsetX=5;//設定陰影x座標。
  ctx.shadowOffsetY=5;//設定陰影y座標。
  ctx.fill();//
  
  ctx.beginPath();//繪製第一層的圓形。
  ctx.arc(200,60,50,0,2*Math.PI);
  ctx.fillStyle='#50510D';
  ctx.fill();
  
  ctx.beginPath();//繪製第二層的圓形。
  ctx.globalAlpha=0.5;//設定第二層圓形的透明度。
  ctx.arc(250,60,50,0,2*Math.PI);
  ctx.fillStyle='#758CC0';
  ctx.fill();
});

主要使用function :

1. globalAlpha - 用來設定物件的透明度，可設定值為：0 ~ 1。
2. shadow -
   

   語法	解說
   shadowColor	設定陰影顏色，需與shadowBlur合用。
   shadowBlur	設定陰影物化程度，值：0 ~ 100。
   shadowOffsetX	設定對應生成陰影物件的x軸定位，正數向右移，負數向左移。
   shadowOffsetY	設定對應生成陰影物件的y軸定位，正數向下移，負數向上移。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/naxsrvej/