HTML 画布 - shadowOffsetY 属性

HTML 画布 shadowOffsetY 属性通过 CanvasRenderingContext2D 接口，用于指定为渲染图像绘制的阴影的垂直距离。

可能的输入值

它采用一个浮点数整型值，表示在画布元素图像上垂直需要的阴影长度。

示例

以下示例使用 HTML 画布 shadowOffsetY 属性在图像上绘制一个圆圈并将阴影应用于圆圈，使圆圈的偏移 Y 轴值变为正值。

<!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="250" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.shadowColor = 'blue';
      context.shadowBlur = 100;
      context.shadowOffsetY = 50;
      context.fillStyle = 'orange';
      context.arc(100, 100, 50, 0, 2 * Math.PI);
      context.fill();
   </script>
</body>
</html>

输出

此网页上的代码返回的输出如下 −

示例

以下示例将阴影应用于在画布元素上绘制的圆圈，圆圈阴影的偏移 Y 值为负值，这样阴影将向上移动。

<!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="250" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.shadowColor = 'blue';
      context.shadowBlur = 100;
      context.shadowOffsetY = -50;
      context.fillStyle = 'orange';
      context.arc(100, 150, 50, 0, 2 * Math.PI);
      context.fill();
   </script>
</body>
</html>

输出

此网页上的代码返回的输出如下 −

html_canvas_shadows_and_transformations.htm

打印页面

上一个

下一个