使用HTML5畫布（canvas）生成陰影效果

使用HTML5的畫布特性，我們可以創建圖形，在這片文章中，我們將創建圖形的陰影。

  var canvas = document.getElementById('shadowcanvas');
  var ctx = canvas.getContext('2d');

  ctx.save();
  ctx.fillStyle = '#EB852A'; 
  ctx.shadowOffsetX = 15; // 陰影Y軸偏移
  ctx.shadowOffsetY = 15; // 陰影X軸偏移
  ctx.shadowBlur = 14; // 模糊尺寸
  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 顏色

  ctx.beginPath(); 
  ctx.arc(150, 150, 75, 0, 2 * Math.PI, false); 
  ctx.fill();
  ctx.restore(); 

  ctx.fillStyle = '#222222'; 
  ctx.beginPath(); 
  ctx.arc(350, 150, 75, 0, 2 * Math.PI, false); 
  ctx.fill();  

這段代碼中，我們首先得到畫布并取得context，調用方法添加陰影相關屬性，包括了偏移，模糊和陰影顏色。最后調用canvas方法生成圖形，這里我們為了更好的對比效果，分別生成了2個圓形，一個包含陰影，一個不包含陰影。

注意：以上陰影屬性，至少得設置顏色和模糊度。

希望這個小技巧能幫助大家生成更酷的畫布效果。

來源：使用HTML5畫布（canvas）生成陰影效果