HTML5 canvas 合成与裁切

在之前的例子里面，我们总是将一个图形画在另一个之上，对于其他更多的情况，仅仅这样是远远不够的。比如，对合成的图形来说，绘制顺序会有限制。不过，我们可以利用 globalCompositeOperation 属性来改变这种状况。此外, clip属性允许我们隐藏不想看到的部分图形。

globalCompositeOperation

我们不仅可以在已有图形后面再画新图形，还可以用来遮盖指定区域，清除画布中的某些部分（清除区域不仅限于矩形，像clearRect()方法做的那样）以及更多其他操作。

• globalCompositeOperation = type ，这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串：
  
  
  
  
  
  
  
  
  

裁切路径

之前的博客中，介绍了 stroke 和 fill 方法，这里介绍第三个方法clip

• clip（） ：将当前正在构建的路径转换为当前的裁切路径。
• 默认情况下，canvas 有一个与它自身一样大的裁切路径（也就是没有裁切效果）。
• 裁切路径的作用是遮罩作用，用来隐藏不需要的部分
• 裁切路径以外的部分不会显示出来，而与裁切图形重叠的的部分才会显示

clip裁切示例：

我们将要绘制一个草原上飘满蒲公英的画面

• 绘制背景
• 平移坐标原点
• 绘制裁切形状
• 绘制背景渐变
• 随机产生蒲公英
• 蒲公英产生函数
• 注意：在这里合理利用translate方法可以便捷的确定图形的位置

window.onload=draw1;
function draw1() {
  var ctx = document.getElementById('canvas').getContext('2d');
  //ctx.fillStyle="white";
  ctx.fillRect(0,0,400,400);
  ctx.translate(200,200);

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

  // draw background
  var lingrad = ctx.createLinearGradient(0,-200,0,200);
  lingrad.addColorStop(0, '#00ABEB');
  lingrad.addColorStop(0.5, '#fff');
  lingrad.addColorStop(1, '#26C000');

  ctx.fillStyle = lingrad;
  ctx.fillRect(-200,-200,400,400);

  // 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));
    drawSnowflake(ctx,Math.floor(Math.random()*4)+2);
    ctx.restore();
  }
}

function drawSnowflake(ctx,r)//蒲公英（本来是要画雪花的，但是太丑了哈哈哈哈，感觉还挺像蒲公英就......）
{
  ctx.save();
  ctx.beginPath();
  ctx.strokeStyle="white";
  for(var i=0;i<6;i++)
  {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(r*((i+1)%3+1),0);
    ctx.stroke();
    ctx.rotate(Math.PI/6);
  }
  ctx.restore();
}