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();
    }

 

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

 

 

 

 

 

 

 

 

 

 

 

posted @ 2012-12-06 08:11  卡马克  阅读(2223)  评论(0编辑  收藏  举报