HTML5 canvas 合成与裁切

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

globalCompositeOperation

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

  • globalCompositeOperation = type ,这个属性设定了在画新图形时采用的遮盖策略,其值是一个标识12种遮盖方式的字符串:
    HTML5 canvas 合成与裁切_第1张图片
    HTML5 canvas 合成与裁切_第2张图片
    HTML5 canvas 合成与裁切_第3张图片
    HTML5 canvas 合成与裁切_第4张图片
    HTML5 canvas 合成与裁切_第5张图片
    HTML5 canvas 合成与裁切_第6张图片
    HTML5 canvas 合成与裁切_第7张图片
    HTML5 canvas 合成与裁切_第8张图片
    HTML5 canvas 合成与裁切_第9张图片

裁切路径

之前的博客中,介绍了 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();
}

HTML5 canvas 合成与裁切_第10张图片

你可能感兴趣的:(Web前端开发)