【报Bug】oneplus+8手机canvas超级卡顿

示例代码：

<view id="canvasPanel" :style="'width:' + ctxWidth + 'px;height:' + ctxWidth + 'px;margin:0 auto;position:relative;'">  
                    <canvas type="2d" canvas-id="myCanvas" id="myCanvas"   
                    :style="'width:' + ctxWidth + 'px;height:' + ctxWidth + 'px;position:absolute;top:0;left:0;right:0;'">  
                        <p style="color:white;"></p>  
                    </canvas>  
                    <canvas type="2d" canvas-id="pointCanvas" id="pointCanvas"   
                    @touchstart="canvasTouchStartHandler"   
                    @touchend="canvasTouchEndHandler" @touchmove="canvasTouchMoveHandler"  
                    :style="'width:' + ctxWidth + 'px;height:' + ctxWidth + 'px;position:absolute;top:0;left:0;right:0;z-index:8888;'">  
                    </canvas>  
                </view>  

canvasTouchStartHandler(event) {  
            var eventPos = this.getOtherToucchIntOffset(event);  
            // this.bigEventImg();  
            const { x, y } = event.changedTouches[0];  
            this.reDrawEventImg(x, y);  
        },  
        canvasTouchEndHandler(event) {  
            var eventPos = this.getToucchEndIntOffset(event);  

            // this.smallerEventImg();  
            const { x, y } = event.changedTouches[0];  
            // this.reDrawEventImg(x, y);  
            this.updateColor(eventPos.X, eventPos.Y);  
        },  
        getOtherToucchIntOffset(event) {  
            return this.getToucchIntOffset(event.changedTouches[0]);  
        },  
        getToucchEndIntOffset(event) {  
            return this.getToucchIntOffset(event.changedTouches[0]);  
        },  
        getToucchIntOffset(touch) {  
            var pageX = parseInt(touch.x);  
            var pageY = parseInt(touch.y);  
            return { X: pageX, Y: pageY };  
        },  
        getToucchSelectorQuery() {  
            uni.createSelectorQuery().select('#canvasPanel').boundingClientRect(data => {  
                if (!data || data.length === 0) {  
                    setTimeout(() => this.getToucchSelectorQuery(), 20)  
                    return  
                }  
                this.position = data;  
            }).exec();  
        },  
        canvasTouchMoveHandler(event) {  
            event.preventDefault();  
            var eventPos = this.getOtherToucchIntOffset(event);  
            // this.reDrawEventImg(eventPos.X, eventPos.Y);  
            this.updateColor(eventPos.X, eventPos.Y);  
        },  
        reDrawEventImg(mouseX, mouseY) {  
            if (!this.pointInWheel(mouseX, mouseY)) {  
                return;  
            }  
            // this.pointCanvas.clearRect(mouseX - 20, mouseY - 20, 40, 40);  
            this.pointCanvas.drawImage(this.strawIcon, mouseX - 20, mouseY - 20, 40, 40);  
            this.pointCanvas.draw()  
        },  
        generateImageData() {  
            const that = this;  
            uni.canvasGetImageData({  
              canvasId: 'myCanvas',  
              x: 0,  
              y: 0,  
              width: that.ctxWidth,  
              height: that.ctxHeight,  
              success(res) {  
                that.imageData = res.data;  
              }  
            })  
        },  
        updateColor(mouseX, mouseY) {  
            if (this.pointInWheel(mouseX, mouseY) == false) {  
                return;  
            }  
            // 3. redraw the wheel event img  
            this.reDrawEventImg(mouseX, mouseY);  

            const that = this;  
            if(this.imageData.length > 0) {  
                let data = this.imageData;  
                var i = ((mouseY * that.ctxWidth) + mouseX) * 4;  
                //  get RGBA values  
                var hexVal = (that.d2Hex(data[i]) + that.d2Hex(data[i + 1]) + that.d2Hex(data[i + 2]));  
                that.setCurrentColor(data[i], data[i + 1], data[i + 2]);  
                that.hexVal = hexVal  
            } else {  
                uni.canvasGetImageData({  
                  canvasId: 'myCanvas',  
                  x: 0,  
                  y: 0,  
                  width: that.ctxWidth,  
                  height: that.ctxHeight,  
                  success(res) {  
                    var data = res.data;  
                    that.imageData = data;  
                    var i = ((mouseY * that.ctxWidth) + mouseX) * 4;  
                    //  get RGBA values  
                    var hexVal = (that.d2Hex(data[i]) + that.d2Hex(data[i + 1]) + that.d2Hex(data[i + 2]));  
                    that.setCurrentColor(data[i], data[i + 1], data[i + 2]);  
                    that.hexVal = hexVal  
                  }  
                })  
            }  
        },

操作步骤：

参照以上代码实现方式

预期结果：

色环取值滑动流畅，不卡顿

实际结果：

色环取值滑动超级卡顿