canvas globalCompositeOperation

最新推荐文章于 2022-08-25 17:00:02 发布

meahu

最新推荐文章于 2022-08-25 17:00:02 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript canvas 文章标签： javascript canvas

JavaScript 同时被 2 个专栏收录

18 篇文章

订阅专栏

canvas

6 篇文章

订阅专栏

globalCompositeOperation 可以在已有图形后面再画新图形，还可以用来遮盖，清除（比 clearRect 方法强劲得多）某些区域。
使用：globalCompositeOperation = type;
效果图如下：
不知为什么，source-in、source-atop 效果没出来
这里写图片描述

不知为什么，destination-in、destination-out 效果没出来
这里写图片描述

这里写图片描述

<!--图片的源码为-->
<body>
    <div>
        <ul>
            <li>source-over：默认设置，新图形会覆盖在原有内容之上。</li>
            <li>source-in：新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。</li>
            <li>source-out：结果是只有新图形中与原有内容不重叠的部分会被绘制出来。</li>
            <li>source-atop：新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上。</li>
        </ul>
        <canvas id="canvas1" width=160 height=160></canvas>
        <canvas id="canvas2" width=160 height=160></canvas>
        <canvas id="canvas3" width=160 height=160></canvas>
        <canvas id="canvas4" width=160 height=160></canvas>
    </div>

    <div>
        <ul>
            <li>destination-over：会在原有内容之下绘制新图形。</li>
            <li>destination-in：原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的。</li>
            <li>destination-out：原有内容中与新图形不重叠的部分会被保留。</li>
            <li>destination-atop：原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形。</li>
        </ul>
        <canvas id="canvas5" width=160 height=160></canvas>
        <canvas id="canvas6" width=160 height=160></canvas>
        <canvas id="canvas7" width=160 height=160></canvas>
        <canvas id="canvas8" width=160 height=160></canvas>
    </div>

    <div>
        <ul>
            <li>lighter：两图形中重叠部分作加色处理。</li>
            <li>darker：两图形中重叠的部分作减色处理。</li>
            <li>xor：重叠的部分会变成透明。</li>
            <li>copy：只有新图形会被保留，其它都被清除掉。</li>
        </ul>
        <canvas id="canvas9" width=160 height=160></canvas>
        <canvas id="canvas10" width=160 height=160></canvas>
        <canvas id="canvas11" width=160 height=160></canvas>
        <canvas id="canvas12" width=160 height=160></canvas>
    </div>

    <script type="text/javascript">

        draw(1, "source-over");
        draw(2, "source-in");
        draw(3, "source-out");
        draw(4, "source-atop");

        draw(5, "destination-over");
        draw(6, "destination-in");
        draw(7, "destination-out");
        draw(8, "destination-atop");

        draw(9, "lighter");
        draw(10, "darker");
        draw(11, "xor");
        draw(12, "copy");

        function draw(id, globalCompositeOperation) {
            var canvas = "canvas" + id;console.log(canvas);
            var ctx = document.getElementById(canvas).getContext("2d");

            ctx.globalCompositeOperation = globalCompositeOperation;

            ctx.fillStyle = "#0000ff";
            ctx.fillRect(0, 0, 100, 100);

            ctx.fillStyle = "#ff0000";
            ctx.fillRect(40, 40, 100, 100);
        }
    </script>
</body>