canvas shadowOffsetY 屬性

admin發表於2019-08-25
Canvas

此屬性可以設定或者返回陰影與圖案的垂直偏移距離，預設值為0。

shadowOffsetY=0 說明陰影位於圖案的正下方，也就是說陰影被圖案覆蓋。

shadowOffsetY=20 說明陰影相對於圖案向下偏移20畫素。

shadowOffsetY=-20 說明陰影相對於圖案向下偏移-20畫素。

下面會通過程式碼例項演示屬性的具體作用，效果一目瞭然。

特別說明：如需調整陰影與形狀的垂直距離，請使用shadowOffsetX屬性。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.shadowOffsetY=number;

屬性值說明：

（1）.number：正值或負值，定義陰影與形狀的垂直距離。

瀏覽器相容：

（1）.IE9+瀏覽器支援此屬性。

（2）.谷歌瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.Opera瀏覽器支援此屬性。

（5）.Safari瀏覽器支援此屬性。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");
  ctx.shadowBlur=10;
  ctx.shadowOffsetY=20;
  ctx.shadowColor="black";
  ctx.fillStyle="red";
  ctx.fillRect(20,20,100,80);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/25/094142w3oeegllgmlwbt2w.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼設定屬性值為20px，可以讓陰影向下偏移20畫素。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");
  ctx.shadowBlur=10;
  ctx.shadowOffsetY=20;
  ctx.shadowColor="black";
  ctx.fillStyle="red";
  ctx.fillRect(20,20,100,80);

  ctx.fillStyle="black";
  ctx.font="30px Verdana";
  ctx.fillText(ctx.shadowOffsetY,20,60);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/25/094214hsm028ax3z0xfps6.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此屬性也可以返回設定的陰影垂直偏移量。

相關文章