uniapp-x·绘制图形线条

<view class="content" id="canvas" 
 @touchstart="changeStart" 
 @touchmove="changeMove"
 @touchend="changeEnd"></view>

     
let listTouche = ref<any>([]);
    const changeStart = (res : any) => {
        const touch = res.changedTouches[0];
        // CTX.reset();//重置
        CTX.beginPath();
        CTX.moveTo(touch.screenX, touch.screenY+ scrollTop);

        // 设置虚线样式
        CTX.setLineDash([5, 3]); // 5px实线，3px空白
        CTX.lineWidth = 2; // 线宽
        CTX.strokeStyle = "black"; // 线条颜色
        
        listTouche.value[listTouche.value.length - 1].push({ x: touch.clientX, y: touch.clientY });
    };

    const changeMove = (res : any) => {
        const touch = res.changedTouches[0];
        CTX.lineTo(touch.screenX, touch.screenY+ scrollTop);
        CTX.stroke(); // 实时绘制
        CTX.update(); // 实时更新
        listTouche.value[listTouche.value.length - 1].push({ x: touch.clientX, y: touch.clientY });
    };

    const changeEnd = () => {
        listTouche.value.push([]);
    };
 
 let scrollTop = 0; //使用标签<scroll-view @scroll="changeScroll" 则必须使用scroll辅助坐标
    const changeScroll = (res : any) => {
        scrollTop = res.detail.scrollTop - 50;
    }