android canvas光晕绘制_Canvas实现贝赛尔曲线轨迹动画

最近实现的下图的效果,跟大家分享一下

假如我们要画下图曲线的动画

如果每次都画一条短线连接起来,如下图被分成五段

再看十段

要是被分的段数足够多时每次画一段就很像曲线轨迹了

二次贝赛尔曲线

/**

* 二次贝塞尔曲线动画

* @param {Array} start 起点坐标

* @param {Array} 曲度点坐标(也就是转弯的点,不是准确的坐标,只是大致的方向)

* @param {Array} end 终点坐标

* @param {number} percent 绘制百分比(0-100)

*/

function drawCurvePath(start, point, end, percent){

ctx.beginPath(); //开始画线

ctx.moveTo(start[0], start[1]); //画笔移动到起点

for (var t = 0; t <= percent / 100; t += 0.005) {

//获取每个时间点的坐标

var x = quadraticBezier(start[0], point[0], end[0], t);

var y = quadraticBezier(start[1], point[1], end[1], t);

ctx.lineTo(x, y); //画出上个时间点到当前时间点的直线

}

ctx.stroke(); //描边

}

/**

* 二次贝塞尔曲线方程

* @param {Array} start 起点

* @param {Array} 曲度点