html5 canvas 笔记五（合成与裁剪）

组合 Compositing

globalCompositeOperation

syntax:

globalCompositeOperation = type

注意：下面所有例子中，蓝色方块是先绘制的，即“已有的 canvas 内容”，红色圆形是后面绘制，即“新图形”。

source-over　　这是默认设置，新图形会覆盖在原有内容之上。

destination-over　　会在原有内容之下绘制新图形。

source-in　　新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。

destination-in　　原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的。

source-out　　结果是只有新图形中与原有内容不重叠的部分会被绘制出来。

destination-out　　原有内容中与新图形不重叠的部分会被保留。

source-atop　　新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上。

destination-atop　　原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形

lighter　　两图形中重叠部分作加色处理。

darker　　两图形中重叠的部分作减色处理。

xor　　重叠的部分会变成透明。

copy　　只有新图形会被保留，其它都被清除掉。

裁切路径 Clipping paths

裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏没有遮罩的部分。

syntax

clip()

实例：

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.fillRect(0,0,150,150);
  ctx.translate(75,75);

  // Create a circular clipping path
  ctx.beginPath();
  ctx.arc(0,0,60,0,Math.PI*2,true);
  ctx.clip();

  // draw background
  var lingrad = ctx.createLinearGradient(0,-75,0,75);
  lingrad.addColorStop(0, '#232256');
  lingrad.addColorStop(1, '#143778');
  
  ctx.fillStyle = lingrad;
  ctx.fillRect(-75,-75,150,150);

  // draw stars
  for (var j=1;j<50;j++){
    ctx.save();
    ctx.fillStyle = '#fff';
    ctx.translate(75-Math.floor(Math.random()*150),
                  75-Math.floor(Math.random()*150));
    drawStar(ctx,Math.floor(Math.random()*4)+2);
    ctx.restore();
  }
  
}
function drawStar(ctx,r){
  ctx.save();
  ctx.beginPath()
  ctx.moveTo(r,0);
  for (var i=0;i<9;i++){
    ctx.rotate(Math.PI/5);
    if(i%2 == 0) {
      ctx.lineTo((r/0.525731)*0.200811,0);
    } else {
      ctx.lineTo(r,0);
    }
  }
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}