canvas shadowColor 屬性

admin發表於2018-10-23
Canvas

shadowColor屬性可以設定或者返回陰影的顏色。

顏色預設值是#000000。

語法結構：

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

引數解析：

（1）.color：一個顏色值，用於設定陰影顏色。

瀏覽器相容:

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

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

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

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

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

（6）.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=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.shadowBlur=20;
  ctx.fillStyle="red";
  
  ctx.shadowColor="black";
  ctx.fillRect(20,20,100,80);
  
  ctx.shadowColor="blue";
  ctx.fillRect(140,20,100,80);
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201810/23/003656en2bnncbt4jjf4ny.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼分別將陰影顏色設定為黑色和藍色。

相關文章