HTML 畫布 - shadowBlur 屬性

畫布 2D API 的 HTML 畫布shadowBlur屬性用於指定應用於畫布元素內呈現的圖形的模糊量。

可能的輸入值

該屬性採用正浮點整數值，其中“0”表示無模糊。數字的增加表示要應用更多模糊。

示例

以下示例在畫布元素上繪製一個正方形，並使用 HTML 畫布shadowBlur屬性為其新增陰影。

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

輸出

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

示例

以下示例在畫布元素上繪製一個圓，並使用屬性shadowBlur為其新增陰影。

<!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 = 'green';
      context.shadowBlur = 50;
      context.fillStyle = 'grey';
      context.arc(100, 75, 50, 0, 2 * Math.PI);
      context.fill();
   </script>
</body>
</html>

輸出

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

html_canvas_shadows_and_transformations.htm

列印頁面