全局透明度的设置

  1. globalAlpha：影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 ~ 1.0 ，默认是 1.0 ；
  2. 示例代码：
    <script type="text/javascript">
    window.onload = function () {
        var canvas = document.querySelector("#test");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            ctx.fillStyle = "red";
            ctx.fillRect(0, 0, 100, 100);
            
            ctx.fillStyle = "red";
            ctx.globalAlpha = 0.5;

            ctx.fillRect(100, 100, 100, 100);
        }
    }
</script>
  3. 效果展示

覆盖合成

  1. globalCompositeOperation

    属性值 含义
    source-over 默认。在目标图像上显示源图像。
    source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
    source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
    source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
    destination-over 在源图像上方显示目标图像。
    destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
    destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
    destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
    lighter 显示源图像 + 目标图像。
    copy 显示源图像。忽略目标图像。
    xor 使用异或操作对源图像与目标图像进行组合。

  2. 示例代码

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>
<script type="text/javascript">
    function canvasApp() {
        var w = 300;
        var h = 300;

        var compositing = ['source-over', 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'copy', 'xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
        var len = compositing.length;
        var first = document.body.firstChild;

        function drawScreen() {

            for (var i = 0; i < len; i++) {
                var canvas = document.createElement('canvas');
                canvas.width = w;
                canvas.height = h;
                document.body.insertBefore(canvas, first);
            }

            var canvas = document.querySelectorAll('canvas');

            for (var i = 0; i < canvas.length; i++) {
                var ctx = canvas[i].getContext('2d');

                ctx.save();
                ctx.translate(w / 2, h / 2);
                ctx.fillStyle = 'red';
                ctx.beginPath();
                ctx.arc(-40, 20, 80, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fill();

                ctx.globalCompositeOperation = compositing[i];

                ctx.fillStyle = 'orange';
                ctx.beginPath();
                ctx.arc(40, 20, 80, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fill();
                ctx.restore();

                ctx.fillStyle = 'black';
                ctx.textBaseline = 'middle';
                ctx.textAlign = 'center';
                ctx.font = '30px Arial';
                ctx.fillText((i + 1) + ': ' + compositing[i], w / 2, 40);

            }

        }

        drawScreen();
    }

    canvasApp();
</script>

</html>

  3. 效果展示

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于产品、设计、开发的问题和看法，还有技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程

了解更多

目录

  1. 1. 全局透明度的设置
  2. 2. 覆盖合成