Canvas 动态绘制三次贝塞尔曲线

Canvas 动态绘制三次贝塞尔曲线

想让贝塞尔曲线可以动态的绘制出来，如何才能做到呢？

详细的贝塞尔原理以及分析请参考这篇文章，并且该文章也实现了二次贝塞尔曲线的动态绘制，我只是照猫画虎，将三次贝塞尔曲线实现而已。
http://www.imooc.com/article/22628

原理就是通过贝塞尔曲线的方程，每次都绘制 t 时刻的点，随着时间的增加，绘制的点也越来越接近终点，所以看起来就是动态绘制了曲线。

函数如下所示：

// ctx 画布上下文
// start 贝塞尔曲线起点
// end 贝塞尔曲线终点
// control1 control2 贝塞尔曲线控制点
// percent 当前绘制整个贝塞尔曲线的百分比，绘制完是 100
function drawCurvePath(ctx, start, end, control1, control2, percent) {
				var t = percent / 100;
				var p0 = start;
				var p1 = control1;
				var p2 = control2;
				var p3 = end;
				
				var p01 = [p1[0] - p0[0], p1[1] - p0[1]];// 向量 p0 -> p1
				var p12 = [p2[0] - p1[0], p2[1] - p1[1]];// 向量 p1 -> p2
				var p23 = [p3[0] - p2[0], p3[1] - p2[1]];// 向量 p2 -> p3
				
				var q0 = [p0[0] + p01[0] * t, p0[1] + p01[1] * t];
				var q1 = [p1[0] + p12[0] * t, p1[1] + p12[1] * t];
				var q2 = [p2[0] + p23[0] * t, p2[1] + p23[1] * t];
				
				var q01 = [q1[0] - q0[0], q1[1] - q0[1]];// 向量 q0 -> q1
				var q12 = [q2[0] - q1[0], q2[1] - q1[1]];// 向量 q1 -> q2
				
				var r0 = [q0[0] + q01[0] * t, q0[1] + q01[1] * t];
				var r1 = [q1[0] + q12[0] * t, q1[1] + q12[1] * t];
				
				var r01 = [r1[0] - r0[0], r1[1] - r0[1]];// 向量 r0 -> r1
				
				var b = [r0[0] + r01[0] * t, r0[1] + r01[1] * t];
				
				ctx.moveTo(p0[0], p0[1]);
				ctx.bezierCurveTo(q0[0], q0[1], r0[0], r0[1], b[0], b[1]);
				//console.log("point-->", q0[0] + ", " + q0[1] + ", " + r0[0] + ", " + r0[1] + ", " + b[0] + ", " + b[1]);
			}

使用方式：

			var percent = 0;
			function animate() {
				ctx.clearRect(0, 0, 800, 800);
				ctx.beginPath();
				
				drawCurvePath(
					ctx,
					[215.5, 250],
					[519.5, 254],
					[287.5, 153],
					[512.5, 125],
					percent
				);
				
				
				ctx.stroke();
				
				percent = (percent + 1) % 100;
				
				requestAnimationFrame(animate);
			}   
			animate();