图像合成效果14

//这处需要注意图像合成是针对整张图片的，而且放大镜的效果，就是用arc画的圆，把一个图片加在另一个图片上，通过mousemove来实现，这个在不同浏览器上的效果是不一样的
context.canvas.onmousemove = function(e) {
   var loc = windowToCanvas(context.canvas, e.clientX, e.clientY);
   context.clearRect(0, 0, context.canvas.width, context.canvas.height);
   drawText();

   context.save();

   context.globalCompositeOperation = document.getElementById("compositingSelect").value;
   context.beginPath();
   context.arc(loc.x, loc.y, 100, 0, Math.PI*2, false);
   context.fillStyle = 'orange';
   context.stroke();
   context.fill();

   context.restore();
}
//下面是canvas中所有的图片合成效果
      <select id='compositingSelect' size='11'>
         <option value='source-atop'>source-atop</option>   //显示旧图表与重叠部分的新图形，新图形显示在上层
         <option value='source-in'>source-in</option>   //只显示新图形重叠部分的图形
         <option value='source-out'>source-out</option>   //只显示新图形中不重叠部分的图形
         <option value='source-over'>source-over (default)</option>   //新旧图形都显示，新图开显示在上层
         <option value='destination-atop'>destination-atop</option>   //只显示新图形，重叠部分做加色处理
         <option value='destination-in'>destination-in</option>   //和source-in效果一样
         <option value='destination-out'>destination-out</option>   //只显示旧图形，重叠部分变成透明色
         <option value='destination-over'>destination-over</option>   //新旧都显示，重叠部分以旧图形为主
         <option value='lighter'>lighter</option>   //新旧图形都显示，重叠部分作加色处理
         <option value='copy'>copy</option>   //新图形会被保留，其它都被清除掉
         <option value='xor'>xor</option>   //新旧图形都显示，重叠部分会变成透明
      </select>