canvas globalCompositeOperation

来源：互联网发布：阿里云扩容数据盘编辑：程序博客网时间：2024/06/12 01:23

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>

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing

1 0