HarmonyOS鸿蒙Next中JS UI框架如何利用“二次贝塞尔曲线”消除绘制线条边缘的“锯齿”？

出现此问题现状的代码为：

1. 文件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>
    <input type="button" style="width: 80px; height: 35px; position: absolute; left:45%" value="铅 笔" onclick="drawPencil"/>
    <input type="button" style="width: 80px; height: 35px; position: absolute; left:75%" value="清 空" onclick="clearCanvas"/>
</div>

1. 文件index.css的内容

@media screen and (dark-mode: true) {
    .container{
        background-color: #FFFFFF;
    }
}

1. 文件index.js的内容

export default {
    data:{
        position:[0,0], //触摸屏幕时的点坐标
        tooltype:0, //工具类型
    },
    /**
     * 工具-铅笔
     */
    drawPencil(){
        this.tooltype = 1;
    },
    /**
     * 清空画布
     */
    clearCanvas(){
        this.tooltype = 3;
        this.graphics(0,0,0,0);
    },
    /**
     * 触摸屏幕的起始位置
     * @param msg
     */
    onTouchstart(msg) {
        console.info('开始：。。。。。');
        this.position[0] = msg.touches[0].globalX;
        this.position[1] = msg.touches[0].globalY;
    },
    /**
     * 触摸屏幕的结束位置
     * @param msg
     */
    onTouchmove(msg){
        console.info('移动：。。。。。');
        if(this.tooltype == 1) {
            console.info('画线：。。。。。');
            this.graphics(this.position[0], this.position[1], msg.touches[0].globalX, msg.touches[0].globalY);
            this.position[0] = msg.touches[0].globalX;
            this.position[1] = msg.touches[0].globalY;
        }
    },
    graphics(startX,startY,moveX,moveY){
        const el = this.$refs.canvas;
        const ctx = el.getContext('2d',{ antialias: true });
        if (this.tooltype == 1) {
            console.info('CTX画线：。。。。。');
            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();
        }
        if(this.tooltype == 3){
            console.info('CTX清空：。。。。。');
            const obj = this.$refs.canvas.getBoundingClientRect();
            ctx.clearRect(0,0,obj.width,obj.height);
        }
    },
}

我在index.js文件中的函数graphics()的画线功能中把ctx.lineWidth设置为30，可以很明显看出线的两边边缘部分出现“槽口”。