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

打印页面

上一个

下一个