【HTML5 绘图与动画】 图形合成 1. 合成 globalCompositeOperation 2.裁切 clip

以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。

 

目录：

1. 合成   2.裁切

 

1.合成

①  globalCompositeOperation 的属性值不同，图形的绘制顺序也不同。

语句：

<canvas id="canvas" width="200" height="200" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.fillStyle = "red";
        //新建矩形
        ctx.fillRect(50, 25, 100, 100);
        ctx.fillStyle = "green";
        ctx.globalCompositeOperation = "source-over";   //默认值 ： source-over
        ctx.beginPath();
        //新建圆
        ctx.arc(150, 125, 20, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
    }
</script>

页面表现：

默认为新图形覆盖在原有内容之上。原有内容为 destination, 新图形为 source。

更改代码第 11 行为 ：ctx.globalCompositeOperation = "destination-over";

页面表现为：

更改代码第 11 行为 ：ctx.globalCompositeOperation = "source-atop";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "destination-atop";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "source-over";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "destination-in";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation ="source-out";

页面表现为：

  更改代码第 11 行为 ：ctx.globalCompositeOperation ="destination-out";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "lighter";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "darker";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "copy";

页面表现为：

 更改代码第 11 行为 ：ctx.globalCompositeOperation = "xor";

页面表现为：

 

2.裁切

① 剪切一个区域，在这个区域内绘图

语句：

<canvas id="canvas" width="300" height="300" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.rect(0, 0, 200, 200);
        ctx.stroke();
        ctx.clip();
        //使用clip()剪切出一个宽200高200的区域，之后的绘图都被现在在了这个区域内
        ctx.fillStyle = "green";
        ctx.fillRect(0,0,300,100);
    }
</script>

页面表现：

 

 ② 绘制一个圆形，进行裁切，圆形之外的区域将不会绘制在 canvas 上。

语句：

<canvas id="canvas" width="300" height="300" style="border:solid 1px #999;"></canvas>
<script>
    draw();
    function draw(){
        //使用document.getElementById() 方法, 根据 canvas 元素的 id 获取对 canvas 的引用
        var ctx = document.getElementById('canvas').getContext('2d');
        //绘制背景
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, 300, 300);
        ctx.fill();
        //绘制圆形  
        ctx.beginPath();
        ctx.arc(150, 150, 100, 0, Math.PI*2, true);
        //裁剪路径
        ctx.clip(); //clip()的作用是形成一个蒙版，没有被蒙版的区域会被隐蔽
        for( var i=1; i<90; i++ ){
            ctx.save();
            ctx.transform(0.95,0,0,0.95,30,30);
            ctx.rotate(Math.PI/12);
            ctx.beginPath();
            ctx.fillStyle="red";
            ctx.globalAlpha="0.4";
            ctx.arc(0,0,50,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();
        }
    }
</script>

页面表现：