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

列印頁面

上一個

下一個