canvas如何設定陰影？ canvas設定陰影的方法
- 不言原創
- 2018-09-17 13:43:295258瀏覽
我們知道可以用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 = $$('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設定陰影效果如下：
html5開發手冊。
以上是canvas如何設定陰影？ canvas設定陰影的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！