HTML Canvas - globalAlpha 屬性

上一個

下一個

HTML Canvas globalAlpha 屬性可用於指定要應用於 canvas 元素上繪製的圖形的透明度值。

它通常指定“alpha”值，以便讓圖形或影像更透明。這還使用“rgba”顏色程式碼，其中“a”是透明度係數。

可能的輸入值

它採用一個十進位制數作為輸入，範圍為“0.0”到“1.0”（含），其中“0.0”表示完全透明，“1.0”表示圖形完全不透明。

示例

以下示例在 Canvas 元素上繪製一個正方形，並使用 HTML Canvas globalAlpha 屬性對其應用透明度。

<!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="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.rect(50, 10, 75, 75);
      context.globalAlpha = 0.25;
      context.fillStyle = 'brown';
      context.fill();
      context.closePath();
   </script>
</body>
</html>

輸出

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

示例

以下示例使用 globalAlpha 屬性對繪製在 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.beginPath();
      context.moveTo(100, 50);
      context.lineTo(50, 100);
      context.lineTo(150, 100);
      context.lineTo(100, 50);
      context.globalAlpha = 0.5;
      context.fillStyle = 'blue';
      context.fill();
      context.closePath();
   </script>
</body>
</html>

輸出

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

html_canvas_colors_and_styles.htm

列印頁面

上一個

下一個