【报Bug】微信小程序 globalCompositeOperation 开发工具与真机预览效果不一致

示例代码：

<template>
<view>
<view class="verify">
<canvas class="canvasBoxTow" canvas-id="canvasBoxTow">
<cover-view class="verify_left" :style="{'transform':'translate('+left_x+')'}">
<cover-image :src="clipImage"></cover-image>
</cover-view>
</canvas>

        <!-- 主要为了生成裁剪图 -->  
        <canvas class="canvasBox" canvas-id="canvasBox" v-if="clipImage==''"></canvas>  
    </view>  

    <movable-area class="movaBox">  
        <movable-view direction="horizontal" class="movaView" @change="onChange">  
            <view class="circle"></view>  
        </movable-view>  
    </movable-area>  

    <image :src="clipImage" style="width: 120rpx;" mode="widthFix"></image>  
</view>  

</template>
<script>
let ctx
let ctxTow
export default {
data() {
return {
x : uni.upx2px(750),
y : uni.upx2px(420),
clipImage:"",
left_x : 0
}
},
onReady() {
this.initBg()
},
methods:{
initBg(){
ctx = uni.createCanvasContext('canvasBox',this)
ctx.drawImage('/static/2.jpg', 0, 0,this.x,this.y)
ctx.draw()
this.drawVeriy('clip')
//第二步
this.initBgTow()
},
initBgTow(){
ctxTow = uni.createCanvasContext('canvasBoxTow',this)
ctxTow.drawImage('/static/2.jpg', 0, 0,this.x,this.y)
ctxTow.draw()
this.drawVeriyTow()
},
//取出拼块裁剪的图片
drawVeriy(type){

            ctx.globalCompositeOperation = 'source-out'  
            ctx.moveTo(150,100)  
            ctx.lineTo(200,100)  
            ctx.lineTo(200,150)  
            ctx.lineTo(150,150)  
            ctx.lineTo(150,135)  
            ctx.arc(150,125,10,0.5*Math.PI,1.5*Math.PI,true)  
            ctx.moveTo(150,115)  
            ctx.lineTo(150,100)  
            ctx.stroke()  
            ctx.clip()  
            ctx.drawImage('/static/2.jpg',0,0,this.x,this.y)  
            ctx.draw(true)  

            this.creatImage()  
        },  
        creatImage(){  
            setTimeout(()=>{  
                uni.canvasToTempFilePath({  
                  x: 150,  
                  y: 100,  
                  width: 50,  
                  height: 50,  
                  destWidth: 100,  
                  destHeight: 100,  
                  canvasId: 'canvasBox',  
                  success: (res)=> {  
                    this.clipImage  = res.tempFilePath  
                    console.log("this.clipImage: " + JSON.stringify(this.clipImage));  
                  }   
                })  
            },300)  
        },  
        //背景  
        drawVeriyTow(){  
            ctxTow.beginPath()  
            ctxTow.moveTo(150,100)  
            ctxTow.lineTo(200,100)  
            ctxTow.lineTo(200,150)  
            ctxTow.lineTo(150,150)  
            ctxTow.lineTo(150,135)  
            ctxTow.arc(150,125,10,0.5*Math.PI,1.5*Math.PI,true)  
            ctxTow.moveTo(150,115)  
            ctxTow.lineTo(150,100)  
            ctxTow.setFillStyle('rgba(0,0,0,0.6)')  
            ctxTow.fill()  
            ctxTow.draw(true)  
        },  
        onChange(e){  
            this.left_x = e.detail.x + 'px'  
        }  
    }  
}  

</script>
<style lang="less">
.verify{
width: 100%;
height: 420rpx;
position: relative;
.canvasBox,.canvasBoxTow{
width: 100%;
height: 420rpx;
border: 1rpx solid red;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
}
}

.movaBox{  
    width: 100%;  
    height: 88rpx;  
    clear: both;  
    .movaView{  
        width: 60rpx;  
        height: 60rpx;  
        margin-top: 12rpx;  
        .circle{  
            width: 100%;  
            height:100%;  
            background-color: antiquewhite;  
        }  
    }  
}  

.verify_left{  
    width: 100rpx;  
    height: 100rpx;  
    position: absolute;  
    top: 200rpx;  
    left: 0;  
    z-index: 10;  
    image{  
        width: 100%;  
        height: 100%;  
    }  
}  

</style>

操作步骤：

-

预期结果：

预览模式或者真机调试 效果一致

实际结果：

预览模式或者真机调试 效果不一致