今天小編和大家分享個(gè)有關(guān)于：“在html5中怎么實(shí)現(xiàn)多重陰影發(fā)光效果？”這方面的問(wèn)題，下面是小編在網(wǎng)上整理的相關(guān)內(nèi)容和自己的總結(jié)！希望對(duì)大家的學(xué)習(xí)有所幫助！
前言
在一個(gè)項(xiàng)目中，客戶(hù)提了一個(gè)發(fā)光的效果，效圖如下：
陰影
有的人可能會(huì)說(shuō)，這個(gè)用陰影其實(shí)就可以實(shí)現(xiàn)。但是從圖中可以看出，是一個(gè)比較強(qiáng)烈的發(fā)光效果。實(shí)際的應(yīng)用過(guò)程中我們會(huì)發(fā)現(xiàn)用簡(jiǎn)單陰影參數(shù)實(shí)現(xiàn)的效果很難達(dá)到這樣強(qiáng)烈的發(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);
簡(jiǎn)單的陰影效果下，shadowBlur 表示陰影半徑。當(dāng)陰影半徑比較大的時(shí)候，陰影的擴(kuò)散程度會(huì)比較大，但陰影的強(qiáng)烈度不夠。在陰影的半徑比較小的時(shí)候，陰影的強(qiáng)烈度是夠的，但陰影的擴(kuò)散程度會(huì)比較小。
多重陰影
如何達(dá)到具有較強(qiáng)的陰影強(qiáng)度，又有較好的陰影擴(kuò)散度呢？也就是實(shí)現(xiàn)這種比較強(qiáng)烈的發(fā)光效果。嗯，答案就是使用多重陰影效果。
所謂多重陰影效果，使用陰影效果對(duì)圖形進(jìn)行多次繪制，多次繪制的過(guò)程中，shadowBlur的值會(huì)不一樣，這樣可以形成多個(gè)陰影疊加的效果。
下面是一個(gè)簡(jiǎn)單的示例，代碼如下。
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();從代碼中我們可以看出我們多次使用了陰影的繪制啊，最終的繪制效果如下圖所示。
從圖中可以看出, 陰影有較好的擴(kuò)散程度，也有較好的強(qiáng)烈度。
下面是用多重陰影實(shí)現(xiàn)的文字霓虹燈效果，同樣可以看出有較好的發(fā)光效果。
總結(jié)
可以看出要達(dá)到強(qiáng)烈的發(fā)光效果, 需要使用多重陰影功能。當(dāng)然使用多種陰影也不是沒(méi)有限制的, 因?yàn)殛幱氨旧碛泻艽蟮男阅軗p耗。通過(guò)嘗試我們發(fā)現(xiàn)一般3~5次之間就能夠達(dá)到較好的效果吧。
相信很多小伙伴們?cè)诳赐赀@篇文章的時(shí)候?qū)τ冢骸霸趆tml5中怎么實(shí)現(xiàn)多重陰影發(fā)光效果？”這方面的問(wèn)題也有了少許的了解，當(dāng)然我們對(duì)于html5這方面的相關(guān)知識(shí)學(xué)習(xí)不僅就這些，我們還可以在W3Cschool中進(jìn)行更加專(zhuān)業(yè)性的學(xué)習(xí)和了解！
