在html5中如何實現(xiàn)多重陰影發(fā)光效果

這篇文章給大家分享的是有關在html5中如何實現(xiàn)多重陰影發(fā)光效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

陰影

有的人可能會說，這個用陰影其實就可以實現(xiàn)。但是從圖中可以看出，是一個比較強烈的發(fā)光效果。實際的應用過程中我們會發(fā)現(xiàn)用簡單陰影參數(shù)實現(xiàn)的效果很難達到這樣強烈的發(fā)光效果。
比如：

ctx.shadowColor = 'rgba(255,0,0,1)';
  ctx.shadowBlur =10;
  ctx.shadowOffsetX = 10;
  ctx.shadowOffsetY = 10;
  ctx.fillStyle = 'rgba(0,0,255,1.0)';
  ctx.fillRect(100,100,200,100);

簡單的陰影效果下，shadowBlur 表示陰影半徑。當陰影半徑比較大的時候，陰影的擴散程度會比較大，但陰影的強烈度不夠。在陰影的半徑比較小的時候，陰影的強烈度是夠的，但陰影的擴散程度會比較小。

多重陰影

如何達到具有較強的陰影強度，又有較好的陰影擴散度呢？也就是實現(xiàn)這種比較強烈的發(fā)光效果。嗯，答案就是使用多重陰影效果。

所謂多重陰影效果，使用陰影效果對圖形進行多次繪制，多次繪制的過程中，shadowBlur的值會不一樣，這樣可以形成多個陰影疊加的效果。

下面是一個簡單的示例，代碼如下。

ctx.shadowColor = 'rgba(255,255,0,1)';
  ctx.shadowBlur = 20;
  ctx.shadowOffsetX = 10100;
  ctx.shadowOffsetY = 10100;

  ctx.beginPath();
  ctx.fillStyle = 'rgba(0,0,255,1.0)';
  ctx.arc(-10000, -10000, 50, 0, Math.PI * 2);
  ctx.fill();

  ctx.shadowColor = 'rgba(255,0,0,1)';
  ctx.shadowBlur = 20;
  ctx.shadowOffsetX = 10100;
  ctx.shadowOffsetY = 10100;

  ctx.beginPath();
  ctx.fillStyle = 'rgba(0,0,255,1.0)';
  ctx.arc(-10000, -10000, 30, 0, Math.PI * 2);
  ctx.fill();

感謝各位的閱讀！關于“在html5中如何實現(xiàn)多重陰影發(fā)光效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！