如何在canvas中設置陰影

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

創(chuàng)新互聯(lián)建站于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目網(wǎng)站設計、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元陽信做網(wǎng)站,已為上家服務,為陽信各地企業(yè)和個人服務,聯(lián)系電話:18982081108

首先要知道在canvas中進行繪制時，不管是文本、圖形、還是圖像，也不管是描邊還是填充，都可以通過設置上下文對象的相關屬性，來為它們設置陰影。

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

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

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

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

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

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

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

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

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

<!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設置陰影效果如下：

如何在canvas中設置陰影

看完上述內(nèi)容，你們對如何在canvas中設置陰影有進一步的了解嗎？如果還想了解更多知識或者相關內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站欄目：如何在canvas中設置陰影
瀏覽路徑：http://bm7419.com/article22/jcehjc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、品牌網(wǎng)站制作、電子商務、微信小程序、手機網(wǎng)站建設、用戶體驗

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容