HTML Canvas 陰影
HTML Canvas 陰影
要在 canvas 中建立陰影，我們使用以下四個屬性
-
shadowColor- 定義陰影的顏色 -
shadowBlur- 定義陰影的模糊量 -
shadowOffsetX- 定義陰影水平偏移的距離 -
shadowOffsetY- 定義陰影垂直偏移的距離
shadowColor 屬性
shadowColor 屬性定義陰影的顏色。
預設值為完全透明的黑色。
示例
這裡我們建立了一個帶有淺藍色陰影的填充藍色矩形，以及一個帶有淺藍色陰影的描邊藍色矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 陰影
ctx.shadowColor = "lightblue";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
// 填充矩形
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 100);
// 描邊矩形
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.strokeRect(170, 20, 100, 100);
</script>
自己動手試一試 »
示例
這裡我們建立了一個帶有淺藍色陰影的填充紫色文字，以及一個帶有淺藍色陰影的描邊紫色文字
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 陰影
ctx.shadowColor = "lightblue";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.font = "50px Arial";
// 填充文字
ctx.fillStyle = "purple";
ctx.fillText("Hello World",10,60);
// 描邊文字
ctx.strokeStyle = "purple";
ctx.strokeText("Hello World",10,120);
</script>
自己動手試一試 »
shadowBlur 屬性
shadowBlur 屬性定義應用於陰影的模糊量。
預設值為 0（無模糊）。
示例
將 shadowBlur 屬性設定為 8 的填充和描邊矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 陰影
ctx.shadowColor = "lightblue";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
// 填充矩形
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 100);
// 描邊矩形
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.strokeRect(170, 20, 100, 100);
</script>
自己動手試一試 »
示例
將 shadowBlur 屬性設定為 4 的填充和描邊文字
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 陰影
ctx.shadowColor = "lightblue";
ctx.shadowBlur = 4;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.font = "50px Arial";
// 填充文字
ctx.fillStyle = "purple";
ctx.fillText("Hello World",10,60);
// 描邊文字
ctx.strokeStyle = "purple";
ctx.strokeText("Hello World",10,120);
</script>
自己動手試一試 »
shadowOffsetX 屬性
shadowOffsetX 屬性定義陰影與形狀的水平距離。
正值將陰影向右移動，負值將陰影向左移動。
預設值為 0（無水平偏移距離）。
示例
第一個矩形的 shadowOffsetX = 5，第二個矩形的 shadowOffsetX = 15，第三個矩形的 shadowOffsetX = -10
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 陰影顏色
ctx.shadowColor = "lightblue";
ctx.fillStyle = "blue";
// 矩形 1
ctx.shadowOffsetX = 5;
ctx.fillRect(20, 20, 100, 100);
// 矩形 2
ctx.shadowOffsetX = 15;
ctx.fillRect(170, 20, 100, 100);
// 矩形 3
ctx.shadowOffsetX = -10;
ctx.fillRect(320, 20, 100, 100);
</script>
自己動手試一試 »
shadowOffsetY 屬性
shadowOffsetY 屬性定義陰影與形狀的垂直距離。
正值將陰影向下移動，負值將陰影向上移動。
預設值為 0（無垂直偏移距離）。
示例
第一個矩形的 shadowOffsetY = 5，第二個矩形的 shadowOffsetY = 15，第三個矩形的 shadowOffsetY = -10
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 陰影顏色
ctx.shadowColor = "lightblue";
ctx.fillStyle = "blue";
// 矩形 1
ctx.shadowOffsetY = 5;
ctx.fillRect(20, 20, 100, 100);
// 矩形 2
ctx.shadowOffsetY = 15;
ctx.fillRect(170, 20, 100, 100);
// 矩形 3
ctx.shadowOffsetY = -10;
ctx.fillRect(320, 20, 100, 100);
</script>
自己動手試一試 »
