canvas如何設定陰影？ canvas設定陰影的方法-H5教程-PHP中文網

canvas如何設定陰影？ canvas設定陰影的方法

不言

發布： 2018-09-17 13:43:29

原創

5287 人瀏覽過

我們知道可以用css來實現陰影效果，但是html5中canvas也可以用來設定陰影效果，所以，接下來的這篇文章將給大家來介紹關於如何用canvas來設定陰影效果，話不多說，直接來看內容。

首先要知道在canvas中進行繪製時，不管是文字、圖形、還是圖像，也不管是描邊還是填充，都可以透過設定上下文物件的相關屬性，來為它們設定陰影。

canvas建立陰影效果需要使用以下四個屬性：

shadowColor：陰影的顏色，其預設值為完全透明的黑色。因此，如果沒有把該屬性設為不透明，則陰影是不可見的。此屬性只能設定為一個表示顏色的字串，不能使用漸層或圖案。使用半透明的陰影可以產生很逼真的陰影效果，因為透過陰影還能看到背景。

shadowOffsetX：陰影在X軸的偏移量，單位為像素。預設值為0，陰影位於圖形正下方，陰影是不可見的。大於0向右偏移，小於0向左偏移。陰影偏移量越大，產生的陰影也越大，同時會感覺繪製的圖形在畫布上浮得越高。

shadowOffsetY：陰影在Y軸的偏移量，單位為像素。預設值為0，陰影位於圖形正下方，陰影是不可見的。大於0向下偏移，小於0向上偏移。陰影偏移量越大，產生的陰影也越大，同時會感覺繪製的圖形在畫布上浮得越高。

shadowBlur：陰影的模糊值。是一個與像素無關的值，被用於高斯模糊方程中，以便對陰影進行模糊化處理。預設值為0，表示產生清晰的陰影。該值越大，表示陰影越模糊。

說明：根據canvas規範，只有在滿足以下兩個條件時，瀏覽器才會繪製陰影：

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

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

下面我們就來看看canvas實作的陰影效果實例程式碼：

<!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 = $$(&#39;can&#39;);
        var cans = can.getContext(&#39;2d&#39;);
        cans.fillStyle = &#39;green&#39;;
        cans.shadowOffsetX = 5;
        cans.shadowOffsetY = 5;
        cans.shadowColor = &#39;#333&#39;;
        cans.shadowBlur = 10;
        cans.fillRect(200,300,400,200);
    }
 </script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px"></canvas>
</body>
</html>

登入後複製

#canvas設定陰影效果如下：

canvas如何設定陰影？ canvas設定陰影的方法