关于canvas在连接多点画线时使用曲线优化的一点心得

1.前言

canvas将多个点连接成线，最主要还是用于使用鼠标绘画之类的用途，但是我们往往会发现使用这些点连接起来的线非常不规整，很不自然
所以大多数人想到优化这一点的方法应该就是将简单的点与点的直线连接改为带一定曲度的曲线

2.参考

带着目的我在网上查找相应的文章然后找到了这个博客
但是这个博客不早知道是没讲清楚还是写错了，你是没办法直接使用他的方法的，里面有些参数不清楚，而且因为太久的缘故里面的链接都失效了
所以我在网上搜索了里面提供的关键字：贝塞尔曲线控制点确定的方法.doc 百度文库里有

根据里面的秒速完善了方法

        getCtrlPoint(ps, i, a, b){
            if(!a||!b){
                a=0.25;
                b=0.25;
            }
            let p_1 = ps[i-1],p = ps[i],p1 = ps[i+1],p2 = ps[i+2];
            if(typeof p_1 != 'number'){
                p_1 = p;
            }
            if(typeof p1 != 'number'){
                p1 = p;
            }
            if(typeof p2 != 'number'){
                p2 = p;
            }
            var pAx = p[0] + (p1[0] - p_1[0])*a;
            var pAy = p[1] + (p1[1] - p_1[1])*a;
            var pBx = p1[0] + (p2[0] - p[0])*b;
            var pBy = p1[1] + (p2[1] - p[1])*b;

            return {
                pA:{x:pAx,y:pAy},
                pB:{x:pBx,y:pBy}
            }
        }

第一个点和最后两个点的算法文档里面有说明我就不多说了

3.结果

context(){//canvas对象
    return canvas.getContext("2d");
},

根据方法使用曲线画线方法划线

//index表示当前画的是第几个点 for循环里的参数
var ctrlP = this.getCtrlPoint(points,index);
//这里坐标减0.5是为了能让线宽1px的线能显示正常
this.context.bezierCurveTo(ctrlP.pA.x - 0.5, ctrlP.pA.y - 0.5, ctrlP.pB.x - 0.5,ctrlP.pB.y -0.5, point[0] - 0.5, point[1] - 0.5);

这里将直线改为曲线算成功了，但是我发现直接使用鼠标画的线依然很难看不自热，这是因为鼠标划线点过于密集的原因，可以在划线时间隔曲线将图形模糊处理

//这个loop方法是我写的，你们可以使用forEach,只需要注意里面的this变量就行
//fuzzy这个变量表示当前点是它的整倍数时才计入划线点，当然这个数字不能太大不然会失真
points.loop(this,function(point,index){
    if(index%fuzzy == 0){
        var ctrlP = this.getCtrlPoint(points,index);
        this.context.bezierCurveTo(ctrlP.pA.x - 0.5, ctrlP.pA.y - 0.5, ctrlP.pB.x - 0.5,ctrlP.pB.y -0.5, point[0] - 0.5, point[1] - 0.5);
    }
});

老实说感觉还是画出来的线比原来是好点，但是还是不自然的样子

最后结果

最后编辑于：2020.10.24 16:34:43