HTML 畫布 - shadowOffsetX 屬性

Canvas 2D API 的 HTML 畫布 shadowOffsetX 屬性使用介面 CanvasRenderingContext2D 上下文物件來指定為渲染的圖形繪製的陰影的水平距離。

可能的輸入值

它採用浮點整數值，表示從畫布元素上的圖形橫向需要的陰影長度。

示例

以下示例在畫布元素上繪製一個矩形，並透過使用 HTML 畫布 shadowOffsetX 屬性向其新增正偏移陰影。

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

輸出

以下程式碼在網頁上返回的輸出為 −

示例

以下示例使用 shadowOffsetX 屬性透過負偏移 x 值向矩形新增陰影。

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

輸出

以下程式碼在網頁上返回的輸出為 −

html_canvas_shadows_and_transformations.htm

列印頁面

上一步

下一步