如何在canvas中設(shè)置陰影

發(fā)布時(shí)間：2020-07-20 11:41:06 來(lái)源：億速云閱讀：674 作者：Leah 欄目：web開(kāi)發(fā)

今天就跟大家聊聊有關(guān)如何在canvas中設(shè)置陰影，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

首先要知道在canvas中進(jìn)行繪制時(shí)，不管是文本、圖形、還是圖像，也不管是描邊還是填充，都可以通過(guò)設(shè)置上下文對(duì)象的相關(guān)屬性，來(lái)為它們?cè)O(shè)置陰影。

canvas創(chuàng)建陰影效果需要使用以下四個(gè)屬性：

shadowColor：陰影的顏色，其默認(rèn)值為完全透明的黑色。因此，如果沒(méi)有把該屬性設(shè)置為不透明，則陰影是不可見(jiàn)的。該屬性只能設(shè)置為一個(gè)表示顏色的字符串，不能使用漸變或圖案。使用半透明的陰影可以產(chǎn)生很逼真的陰影效果，因?yàn)橥高^(guò)陰影還能看到背景。

shadowOffsetX：陰影在X軸的偏移量，單位為像素。默認(rèn)值為0，陰影位于圖形正下方，陰影是不可見(jiàn)的。大于0向右偏移，小于0向左偏移。陰影偏移量越大，產(chǎn)生的陰影也越大，同時(shí)會(huì)感覺(jué)繪制的圖形在畫(huà)布是浮得也越高。

shadowOffsetY：陰影在Y軸的偏移量，單位為像素。默認(rèn)值為0，陰影位于圖形正下方，陰影是不可見(jiàn)的。大于0向下偏移，小于0向上偏移。陰影偏移量越大，產(chǎn)生的陰影也越大，同時(shí)會(huì)感覺(jué)繪制的圖形在畫(huà)布是浮得也越高。

shadowBlur：陰影的模糊值。是一個(gè)與像素?zé)o關(guān)的值，被用于高斯模糊方程中，以便對(duì)陰影進(jìn)行模糊化處理。默認(rèn)值為0，表示產(chǎn)生一個(gè)清晰的陰影。該值越大，表示陰影越模糊。

說(shuō)明：根據(jù)canvas規(guī)范，只有在滿足以下兩個(gè)條件時(shí)，瀏覽器才會(huì)繪制陰影：

1、指定了一個(gè)非全透明的shadowColor屬性值；

2、shadowOffsetX、shadowOffsetY、shadowBlur三個(gè)屬性中，至少有一個(gè)屬性的值不是0。

下面我們就來(lái)看看canvas實(shí)現(xiàn)的陰影效果實(shí)例代碼：

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvas</title>
 </head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    canvas{border:dashed 2px #CCC}
 </style>
 <script type="text/javascript">
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$('can');
        var cans = can.getContext('2d');
        cans.fillStyle = 'green';
        cans.shadowOffsetX = 5;
        cans.shadowOffsetY = 5;
        cans.shadowColor = '#333';
        cans.shadowBlur = 10;
        cans.fillRect(200,300,400,200);
    }
 </script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px"></canvas>
</body>
</html>

canvas設(shè)置陰影效果如下：

如何在canvas中設(shè)置陰影

看完上述內(nèi)容，你們對(duì)如何在canvas中設(shè)置陰影有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

如何在canvas中設(shè)置陰影

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽