canvas-图像重叠效果

图像重叠
globalCompositeOperation ： 绘制的图像，在重叠的时候所产生的效果(复合操作)

globalCompositeOperation = ‘source-over’ 默认 后覆盖前
globalCompositeOperation = 'destination-over' 前覆盖后

属性值	描述
source-over	新图形会覆盖原有内容之上
source-atop	新图形中与原有内容重叠的部分会被绘制，并覆盖于原来内容之上
source-in	新图形只会出现原有内容重叠的部分，其他区域变成透明色
source-out	只有新图形中与原有的内容不重叠的部分被保留
destination-over	会在原有内容之下绘制新图形
destination-atop	原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形
destination-in	原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的
destination-out	: 原有内容中与新图形不重叠的部分会被保留。
lighter	两图形中重叠部分作加色处理。
copy	只有新图形会被保留，其它都被清除掉
xor	重叠的部分会变成透明
darker	两图形中重叠的部分作减色处理

operation.gif

代码
HTML

<div id="types">
        <span  class="active">source-over</span>
        <span>source-atop</span>
        <span>source-in</span>
        <span>source-out</span>
        <hr>
        <span>destination-over</span>
        <span>destination-atop</span>
        <span>destination-in</span>
        <span>destination-out</span>
        <hr>
        <span>lighter</span>
        <span>copy</span>
        <span>xor</span>
        <span>darker</span>

    </div>
    <div>
        <pre>
            // source-over: 新图形会覆盖原有内容之上
            // source-atop: 新图形中与原有内容重叠的部分会被绘制，并覆盖于原来内容之上
            // source-in : 新图形只会出现原有内容重叠的部分，其他区域变成透明色
            // source-out : 只有新图形中与原有的内容不重叠的部分被保留

            // destination-over : 会在原有内容之下绘制新图形
            // destination-atop： 原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形
            // destination-in : 原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的
            // destination-out : 原有内容中与新图形不重叠的部分会被保留。

            // lighter ： 两图形中重叠部分作加色处理。
            // copy： 只有新图形会被保留，其它都被清除掉
            // xor ： 重叠的部分会变成透明
            //darker 两图形中重叠的部分作减色处理
        </pre>
    </div>

CSS

<style>
        span {
            margin: 0 20px;
            border: 1px solid #CCC;
        }

        .active {
            background-color: orange;
            color: #FFF;
        }
    </style>

JS

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

canvas.width = 500;
canvas.height = 500;

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');

更改图形重叠函数

function changeOperation(oper) {
    ctx.save();
    ctx.clearRect(0, 0, 500, 500);

    ctx.beginPath();
    ctx.fillStyle = 'green';
    ctx.fillRect(180, 150, 200, 200);

    ctx.globalCompositeOperation = oper || 'source-over';
    
    ctx.beginPath();

    ctx.fillStyle = 'orange';
    ctx.arc(300, 300, 100, 0, 2 * Math.PI);
    ctx.fill();
    ctx.restore();
}

changeOperation();

绑定点击切换图形事件：

var types = document.getElementById('types');
    var typeSpan = types.children;

    for (var i = 0; i < typeSpan.length; i++) {
        typeSpan.index = i;
    }

    types.onclick = function (e) {
        var tar = e.target;
        for (var i = 0; i < typeSpan.length; i++) {
            typeSpan[i].classList.remove('active');
        }
        tar.classList.add('active');
        changeOperation(tar.innerHTML);
    }