HTML 画布 - shadowColor 属性

上一个

下一个

HTML 画布 shadowColor 属性用于指定 Canvas 元素内部所绘制图形的阴影颜色。

可能的输入值

它采用包含颜色代码的字符串值，其可以是以下任何类型：

颜色名称
十六进制代码
Rgb 值
Rgba 值

示例

以下示例通过 HTML 画布 shadowColor 属性使用颜色名称为绘制的阴影添加颜色。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.shadowColor = 'pink';
      context.shadowBlur = 100;
      context.fillRect(50, 20, 100, 100)
   </script>
</body>
</html>

输出

以下代码在网页上返回以下输出：

示例

以下示例采用十六进制颜色代码，并将其应用于应用于 Canvas 元素内部形状的阴影。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.shadowColor = '#A020F0';
      context.shadowBlur = 100;
      context.fillRect(50, 20, 100, 100)
   </script>
</body>
</html>

输出

以下代码在网页上返回以下输出：

示例

以下示例在 Canvas 元素上绘制一个形状，并通过 shadowColor 属性使用 rgba 着色为其应用阴影颜色。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.shadowColor = 'rgb(0,255,255,1)';
      context.shadowBlur = 100;
      context.fillRect(50, 20, 100, 100)
   </script>
</body>
</html>

输出

以下代码在网页上返回以下输出：

html_canvas_shadows_and_transformations.htm

打印页面

上一个

下一个