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

列印頁面

上一個

下一個