2d 贝塞尔曲线_canvas练习之贝塞尔辅助工具

canvas里可以通过context的bezierCurveTo()方法画三次贝塞尔曲线，不过一般对于控制点的感觉不是很深，毕竟很数学化。网上也有很多在线的贝塞尔辅助工具可用，不过自己动手丰衣足食。

这是做出的最终效果。

四个点，包括起点、终点和两个控制点都是可以拖动，显示辅助线和坐标值(相对于canvas的远点)，拖动的点显示为红色。

还是那句话，天下事有难易乎，为之则...，不为则...。

准备

const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')

class Point {
     //类，其他的就不考虑面向对象方式啦
    constructor(x, y) {
    
        this.x = x
        this.y = y
    }
}

const startPoint = new Point(50, 50) //起点
const endPoint = new Point(400, 400) //终点
const ctlPoint1 = new Point(400, 50) //控制点1
const ctlPoint2 = new Point(50, 400) //控制点2
const po