canvas多重陰影發光效果

canvas多重陰影發光效果

前言

在一個項目中，客戶提了一個發光的效果，效果圖以下：

陰影

有的人可能會說，這個用陰影其實就能夠實現。可是從圖中能夠看出，是一個比較強烈的發光效果。實際的應用過程當中咱們會發現用簡單陰影參數實現的效果很難達到這樣強烈的發光效果。 好比

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 表示陰影半徑。當陰影半徑比較大的時候，陰影的擴散程度會比較大，但陰影的強烈度不夠。在陰影的半徑比較小的時候，陰影的強烈度是夠的，但陰影的擴散程度會比較小。

多重陰影

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

所謂多重陰影效果，使用陰影效果對圖形進行屢次繪製，屢次繪製的過程當中，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();

從代碼中咱們能夠看出咱們屢次使用了陰影的繪製啊，最終的繪製效果以下圖所示。

從圖中能夠看出, 陰影有較好的擴散程度，也有較好的強烈度。

下面是用多重陰影實現的文字霓虹燈效果，一樣能夠看出有較好的發光效果。

總結

能夠看出要達到強烈的發光效果, 須要使用多重陰影功能。固然使用多種陰影也不是沒有限制的, 由於陰影自己有很大的性能損耗。經過嘗試咱們發現通常3~5次之間就可以達到較好的效果吧。

關注公衆號「ITMan彪叔」 能夠及時收到更多有價值的文章。另外若是對可視化感興趣，能夠和我交流，微信541002349.