canvas画布使用新版的，我是要控制画布的长宽：1:2，实际下来出现很多手机画线会断，横线还行，竖线一定会断。

<canvas class="canvas_content " type="2d" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px' id="myCanvas" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove" bindtouchend="bindtouchend" bindtouchcancel="bindtouchcancel"></canvas>

  ready() {
      
           

            wx.createSelectorQuery()
                .in(this)
                .select("#control") // canvas获取节点
                .fields({
                    node: true,
                    size: true,
                }) 
                .exec((res) => {
                 


                  
                    const deviceInFo = wx.getSystemInfoSync()
                


                


                  
                    const { windowWidth } = deviceInFo


                    const padding = this.rpx2px(15) * 2



                    let canvasHeight = deviceInFo.windowHeight - padding
                    let canvasWidth = canvasHeight * 2
                    if ((canvasHeight * 2 + res[0].width) > windowWidth) {
                       
                        let leftArea = deviceInFo?.safeArea?.left || this.rpx2px(15)
                        canvasWidth = deviceInFo.windowWidth - this.rpx2px(15) - leftArea - res[0].width
                       
                        canvasHeight = canvasWidth / 2
                    }


                    


                    this.setData({
                        deviceInFo, 
                        canvasWidth,
                        canvasHeight,
                    })


                    this.initCanvas("init")
                })

        },

 initCanvas(type) {
            let ctx = null
            let canvas = null
            let { historyImag, canvasWidth, canvasHeight, deviceInFo, initialCanvasImg } = this.data


          
            wx.createSelectorQuery()
                .in(this)
                .select("#myCanvas") // canvas获取节点
                .fields({
                    node: true,
                    size: true,
                }) 
                .exec((res) => {
                    
                    canvas = res[0].node
                    console.log(`画布初始化完成了没`, res)


                 
                    ctx = canvas.getContext("2d")
                 
                    const width = res[0].width
                    const height = res[0].height
                   
                    const dpr = wx.getWindowInfo().pixelRatio
                   
                    canvas.width = width * dpr
                    canvas.height = height * dpr
                  
                    ctx.fillStyle = "rgb(200, 0, 0)"
                  
                    ctx.lineWidth = 4
                   
                    if (historyImag.length !== 0 || (deviceInFo.platform !== "ios" && type !== "init")) {
                       
                        const image = canvas.createImage()
                     
                        image.onload = () => {
                          
                            ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight)
                        }
                      
                        image.src = historyImag[historyImag.length - 1] || initialCanvasImg
                    }


                    // 缩小/放大图像
                    ctx.scale(dpr, dpr)
                    this.setData({
                        canvas,
                        ctx,
                    })
                  
                    if (type === "init") {
                        wx.canvasToTempFilePath({
                            canvas,
                            png: "png",
                            success: (res) => {
                               
                                const tempFilePath = res.tempFilePath
                                this.setData({
                                    initialCanvasImg: tempFilePath,
                                })
                            },
                        })
                    }
                })

        },

 addPathDrop(event) {
            let { ctx, historyImag, canvas } = this.data
            let { type, changedTouches } = event
            let { x, y } = changedTouches[0]
            if (type === "touchstart"else {
               
                ctx.lineTo(x, y) 
                
                ctx.stroke()
             
                ctx.moveTo(x, y) 
            }
            
            if (type === "touchend" || type === "touchcancel") {
                


      
                    },
                })
            }
        }