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";