HTML 画布 阴影
HTML 画布阴影
为了在画布中创建阴影，我们使用以下四个属性
-
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>
自己尝试一下 »
