HTML5 Canvas设置透明度示例

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 0px;

        padding: 0px;

      }

      #myownCanvas {

        border: 2px solid #9C9898;

      }

    </style>

    <script>

        window.onload = function () {

            var canvas = document.getElementById("myownCanvas");

            var context = canvas.getContext("2d");

            context.beginPath();

            context.rect(210, 20, 110, 110);

            context.fillStyle = "yellow";

            context.fill();

            context.globalAlpha = 0.7;

            context.beginPath();

            context.arc(310, 120, 60, 0, 2 * Math.PI, false);

            context.fillStyle = "brown";

            context.fill();

        };

 

    </script>

  </head>

  <body>

    <canvas id="myownCanvas" width="578" height="200"></canvas>

  </body>

</html>

HTML5 Canvas设置透明度语法

 context.globalAlpha = 0.7;
使用HTML5 Canvas 如何设置全局透明度

使用 HTML5,您可以设置元素的不透明度,您可以使用画布上下文的 GlobalAlpha 属性。 它由一个介于 0 和 1 之间的实数定义,1 表示完全不透明,0 表示完全透明。

日期:2020-04-11 23:04:08 来源:oir作者:oir