📌  相关文章
📜  HTML |画布 shadowColor 属性(1)

📅  最后修改于: 2023-12-03 14:41:53.929000             🧑  作者: Mango

HTML | 画布 shadowColor 属性

简介

在 HTML 画布中，shadowColor 属性是指在绘制图形时，所添加的阴影的颜色。

语法如下：

context.shadowColor = color;

其中，context 是画布上下文（canvas context）变量，color 是用于填充阴影的颜色值。color 的值可以是字符串、十六进制数、RGB 值等。

示例

以下代码片段演示了如何使用 shadowColor 属性添加阴影：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.shadowColor = "black";
ctx.shadowBlur = 10;
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 80);
</script> 

</body>
</html>

在上述示例中，我们在画布上绘制一个蓝色矩形，并为其添加黑色阴影。通过 shadowColor 属性，我们指定了阴影的颜色为黑色。

注意事项
  • 要使用 shadowColor，必须先设置画布的 shadowBlur 属性。
  • shadowColor 只能在基于路径的绘制操作中使用，不能用于文本或图像的阴影。
结论

shadowColor 属性是 HTML 画布中添加阴影的一个重要属性。通过设置 shadowColor，可以实现更加丰富的画布效果。需要注意的是，在使用 shadowColor 前，必须先设置 shadowBlur 属性，并且只能在基于路径的绘制操作中使用。