HTML5 Canvas学习---第四章 《Canvas区域裁剪及混合显示》

　　混合使用save()和restore()方法，我们可以限定画画区域。首先我们可以使用rect()方法包围一个我们希望画画的区域，然后使用clip()方法把该区域裁剪下来。

这样以后我们不管在context中做了什么操作，只有限定的部分显示出来。也就是说clip()的作用是限定要显示的区域。当我们不希望继续限定区域了，可以使用restore()方法跳出来，继续操作原来的context。

function drawScreen() {
        var x = canvas.width / 2;
        var y = canvas.height / 2;
        var radius = 75;
        var offset = 50;

        //裁剪的区域为 (x, y)为中心半径为75的圆
        context.save();
        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, false);
        context.clip();

        // 先画一个蓝色的圆弧， 超过裁剪的部分不显示
        context.beginPath();
        context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'blue';
        context.fill();

        // 画一个黄色的圆弧， 超过裁剪的部分不显示
        context.beginPath();
        context.arc(x + offset, y, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'yellow';
        context.fill();

        // 画一个红色的圆弧， 超过裁剪的部分不显示
        context.beginPath();
        context.arc(x, y + offset, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'red';
        context.fill();

        /*
         * restore()方法会返回到context原先的状态，在这里是clip()之前的状态。
         * 大家可以移除context.beginPath()方法，试试会发生什么。
         */
        context.restore();
        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, false);
        context.lineWidth = 10;
        context.strokeStyle = 'blue';
        context.stroke();
    }

再次强调，一般使用裁剪功能的调用形式是

1. save();
2. clip();
3. restore();

这个顺序来进行调用。

在Canvas中混合显示

• globalAlpha：透明度（0.0：完全透明）--》（1.0：完全不透明），在canvas画图进行之前该值要设置
• globalCompositeOperation：定义我们希望画的图像的形状

• destination：canvas当前显示的bitmap
• source：我们要在canvas中画的形状

function drawScreen() {
        var squareWidth = 55;
        var circleRadius = 35;
        var shapeOffset = 50;
        var operationOffset = 150;
        var arr = [];

        arr.push('source-atop');
        arr.push('source-in');
        arr.push('source-out');
        arr.push('source-over');
        arr.push('destination-atop');
        arr.push('destination-in');
        arr.push('destination-out');
        arr.push('destination-over');
        arr.push('lighter');
        arr.push('darker');
        arr.push('xor');
        arr.push('copy');

        thisOperation = arr[0];
        context.beginPath();
        context.rect(0, 0, squareWidth, squareWidth);
        context.fillStyle = 'blue';
        context.fill();

        // 设置globalComposite
        context.globalCompositeOperation = thisOperation;

        // 画一个实心圆弧
        context.beginPath();
        context.arc(shapeOffset, shapeOffset, circleRadius, 0, 2 * Math.PI, false);
        context.fillStyle = 'red';
        context.fill();
    }

 

　　虽然参数的值有点多，但我们需要多次联系，直到完全掌握为止。