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>
自己动手试一试 »
