HarmonyOS 鸿蒙Next JS UI框架APP开发 使用canvas组件进行绘图时线条有毛边锯齿问题如何解决

HarmonyOS 鸿蒙Next JS UI框架APP开发 使用canvas组件进行绘图时线条有毛边锯齿问题如何解决 使用JS UI框架开发绘图软件APP时，我初步实现了线条的整个连接。但是在测试时发现手机、平板电脑上绘制的线条边缘均呈现为锯齿状、有毛边，这种问题该如何处理？

然后，我把canvas中的 lineTo()方法 改变为 quadraticCurveTo()方法，仍然会出现“线条的锯齿边缘”。

项目中index.hml代码内容为：

<div class="container">
    <canvas ref="canvas" width="100%" height="100%" style="width: 100%; height: 100%; background-color: #ffff00;" @touchstart="onTouchstart" @touchmove="onTouchmove"></canvas>
</div>

index.js的代码为：

export default {

    data:{
      position:[0,0],
    },

    onShow(startX,startY,moveX,moveY){

        const el = this.$refs.canvas;
        const ctx = el.getContext('2d');
        ctx.beginPath();

        ctx.fillStyle = "#000000"; //填充样式
        ctx.strokeStyle = "none"; //描边样式
        ctx.lineWidth = 30; //线的宽度
        ctx.lineCap = "round"; //让画线连贯


        ctx.moveTo(startX,startY);//起点
//        ctx.lineTo(moveX,moveY);//终点
        ctx.quadraticCurveTo((moveX+startX)/2,(moveY+startY)/2,moveX,moveY);

        ctx.closePath();
        ctx.stroke();
    },

    /**
     * 触摸屏幕的起始位置
     * @param msg
     */
    onTouchstart(msg) {
        console.info('开始：。。。。。');
        this.position[0] = msg.touches[0].globalX;
        this.position[1] = msg.touches[0].globalY;
    },

    onTouchmove(msg){
        console.info('移动：。。。。。');

        this.onShow(this.position[0],this.position[1],msg.touches[0].globalX,msg.touches[0].globalY);
        this.position[0] = msg.touches[0].globalY;
        this.position[1] = msg.touches[0].globalY;
    }

}

如果真要通过【二次贝塞尔曲线】的方式来消除线条的锯齿边缘，该如何进行计算和实现？