H5 canvas中globalCompositeOperation及putImageData()

Question

从背景画布通过getImageData()方法获得目标图形，是方形的，现在想将方形做成类似拼图形式的                //s为方形宽高 r为小圆半径                ctx_ceng.beginPath();                ctx_ceng.moveTo(0, cY);                ctx_ceng.lineTo(s/2-r,cY);                ctx_ceng.arc(s/2,cY,25,Math.PI,2*Math.PI);                ctx_ceng.lineTo(s,cY);                ctx_ceng.lineTo(s,cY+150);                ctx_ceng.lineTo(s,cY+150);                ctx_ceng.arc(s/2,cY+s,25,2*Math.PI,Math.PI,true);                ctx_ceng.lineTo(0,cY+150);                ctx_ceng.closePath();                ctx_ceng.stroke();                ctx_ceng.fillStyle = 'green';                ctx_ceng.fill();                //以上为画好的拼图块                ctx_ceng.globalCompositeOperation="source-in";//保留重合后添加的部分                              ctx_ceng.beginPath();                ctx_ceng.putImageData(imgData, 0,cY-r);//添加之前获取的图片怎样操作才能只在绿色部分填充截取到的图片？求大神支招~~

Answer 1

解决了，应该用ctx_ceng.globalCompositeOperation="destination-in";