canvas贝塞尔曲线爱心_canvas获取贝塞尔曲线上点的坐标，并沿贝塞尔曲线移动

贝塞尔曲线的数据{

lineBegin:[536,446],

lineControl : [1313,400],

lineEnd : [1213 , 921],

}

绘制贝塞尔曲线let ctx = this.ctx;

ctx.beginPath();

let begin = this.lineBegin;

let control = this.lineControl;

let end = this.lineEnd;

ctx.moveTo(...begin);

ctx.quadraticCurveTo(...control, ...end);

ctx.strokeStyle = "#2578b0";

ctx.lineWidth = 2;

ctx.stroke();

根据贝塞尔曲线的公式，获取某时刻t[0-1]的贝塞尔曲线上的点let x = Math.pow((1 - t) ,2) * begin[0] + 2 * t * (1 - t) * control[0] + Math.pow(t ,2) * end[0];

let y = Math.pow((1 - t) ,2) * begin[1] + 2 * t * (1 - t) * control[1] + Math.pow(t , 2) * end[1];

画沿着轨迹移动的图形this.ctx.drawImage(img , x , y );

测试代码

该代码作用是调测各个参数下的贝塞尔曲线

{ { rectStyle['animation-timing-function'] }}

ref="form"

label-width="80px"

>

v-model="begin[0]"

:min="0"

:step="5"

:max="width"

label="beginX"

@change="draw"

/>

v