溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關如何在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 = $$('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中設置陰影有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
