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