canvas設定陰影效果

admin發表於2018-08-17
Canvas
在canvas中為圖案設定陰影非常的簡單，使用下面幾個屬性即可實現。

（1）.shadowColor：設定或返回用於陰影的顏色。

（2）.shadowBlur：設定或返回用於陰影的模糊級別。

（3）.shadowOffsetX：設定或返回陰影距形狀的水平距離。

（4）.shadowOffsetY：設定或返回陰影距形狀的垂直距離。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin: 50px;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var ctx = cvs.getContext('2d');
  ctx.shadowBlur = 20;
  ctx.shadowColor = "black";
  ctx.fillStyle = "blue";
  ctx.shadowOffsetX = 5;
  ctx.shadowOffsetY = 5;
  ctx.fillRect(20, 20, 100, 80);
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="200"></canvas>
</body>
</html>

相關文章