假设我有一条路径：
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 20);
context.lineTo(200, 160);
context.quadraticCurveTo(230, 200, 250, 120);
context.bezierCurveTo(290, -40, 300, 200, 400, 150);
context.lineTo(500, 90);
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
这会一次打印所有路径：
如何将路径拆分为给定长度的子路径？例如：context.splitCurrentPathIntoSubPath(0, 0.75)应该只返回路径的前 3/4。
我想用它来实现动画。如果有更简单的方法，也欢迎。
使用均匀间隔点绘制复杂路径的演示：
http://jsfiddle.net/m1erickson/2fodu9pa/
匀速概述
“速度”定义为每单位时间的距离。
因此，“统一速度”是指每单位时间以一致的指定距离行驶。
因此，以每 1/60 秒 2 像素的速度沿您的路径移动将是匀速移动的一个示例。
要行进 2 个像素，您必须计算沿路径距离上一个点 2 个像素的点。
以匀速增量绘制包含直线和曲线的路径需要数百次小计算。
以下是确定沿路径均匀分布的点数组的方法：
将您的路径分成几段：直线、二次曲线、贝塞尔曲线、直线。
使用定义每个线段的数学公式（参见下面的公式）计算每个线段上的许多 (300+) 个点，并将这些点放在一个数组中。
依次沿着每个点走，计算点之间的距离（见下面的公式）。
保持沿点行进的累计距离。
当当前行进的点达到指定长度时，将该点保存在第二个数组中。
然后要逐步为路径设置动画，您可以创建一个动画循环，为第二个数组中的每个下一个点绘制一条线。
注意：如果您将指定的距离保持得足够小（例如 1-2 像素），则绘制的线条在必要时会显示为弯曲的。
以下是支持此方法的公式：
沿线计算点数：
// T is an interval between 0.00 and 1.00
// To divide a Line into 300 parts you would call the function 300 times
// with T increasing 1.00/300 each time
function getLineXYatPercent(startPt,endPt,T) {
var dx = endPt.x-startPt.x;
var dy = endPt.y-startPt.y;
var X = startPt.x + dx*T;
var Y = startPt.y + dy*T;
return( {x:X,y:Y} );
}
沿二次曲线计算点：
// T is an interval between 0.00 and 1.00
// To divide a Quadratic Curve into 300 parts you would call the function 300 times
// with T increasing 1.00/300 each time
function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x;
var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y;
return( {x:x,y:y} );
}
沿贝塞尔曲线计算点：
// T is an interval between 0.00 and 1.00
// To divide a BezierCurve into 300 parts you would call the function 300 times
// with T increasing 1.00/300 each time
function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
return({x:x,y:y});
}
// cubic helper formula at T distance
function CubicN(T, a,b,c,d) {
var t2 = T * T;
var t3 = t2 * T;
return a + (-a * 3 + T * (3 * a - a * T)) * T
+ (3 * b + T * (-6 * b + b * 3 * T)) * T
+ (c * 3 - c * 3 * T) * t2
+ d * t3;
}
两点之间的距离：
var dx=point2.x-point1.x;
var dy=point2.y-point1.y;
var distance=Math.sqrt(dx*dx+dy*dy);
祝你的项目好运！
我在使用 D3.js 为 SVG 弧线制作动画时遇到了类似的问题。我的解决方案借鉴了这一点。它不是最直观的，但通常用于 D3 动画。它需要仔细设置虚线偏移和线长。CSS Tricks 很好地解释了这里的技术，我强烈建议在查看我的代码之前阅读它。
我已经修改了上面的 JSFiddle，在这里为您的线路实施了这项技术。请注意，即使线路自行循环，这也将起作用。
关于线长的说明：
此实现要求您知道线路的大约长度，以便您可以将长度 var 设置为大于它。对于贝塞尔曲线和二次曲线，这很棘手，但仍然可以完成（这个问题看起来很有希望）。在我的演示中，我通过反复试验发现你的大约是 608px。将长度设置为 10000 可能会确保您的线条始终正确绘制，但代价是每毫秒调用大量不必要的间隔回调。底线是：如果您关心性能，请找出贝塞尔公式；如果不这样做，请将该变量设置为高。
代码：
HTML
<body>
<canvas id="canvas" width="500" height="500">
webgl couldn't be started
</canvas>
</body>
JavaScript
canvasHolder = document.getElementById( 'canvas' );
context = canvasHolder.getContext('2d');
context.fillStyle = 'white';
var w = canvasHolder.width, h = canvasHolder.height;
context.fillRect( 0, 0, w, h);
//set the direction the line draws in
//1->ltr | -1->rtl
var dir = -1;
//IMPORTANT: this must be set to greater than the length
//of the line
var length = 608;
//the speed of the line draw
var speed = 1;
var progress = 0;
var lineInterval;
//Go!
context.globalCompositeOperation='copy';
drawLine();
function drawLine() {
//this clears itself once the line is drawn
lineInterval = setInterval(updateLine, 1);
}
function updateLine() {
//define the line
defineLine();
if(progress<length)
{
progress+=speed;
moveDash(progress, dir);
} else {
clearInterval(lineInterval);
}
}
function defineLine() {
context.beginPath();
context.moveTo(100, 20);
context.lineTo(200, 160);
context.quadraticCurveTo(230, 200, 250, 120);
context.bezierCurveTo(290, -40, 300, 200, 400, 150);
context.lineTo(500, 90);
context.lineWidth = 5;
context.strokeStyle = 'blue';
}
function moveDash(frac, dir) {
//default direction right->left
var dir = dir || -1
context.setLineDash([length]);
context.lineDashOffset = dir*(frac+length);
context.stroke();
}
这是我的解决方案，基本上在您的路径上方绘制一个矩形，然后每个帧更新将矩形移动 1 X 位置，所以慢慢地框将移过并远离路径，看起来您正在绘制动画路径，
我已经为你把它保存在jsfiddle上:) 这是独立的代码
window.addEventListener( "load", firstLoaded, false);
then = Date.now();
setInterval(main, 1); // Execute as fast as possible
var cube_x_position = 0;
function main()
{
context.beginPath();
context.moveTo(100, 20);
context.lineTo(200, 160);
context.quadraticCurveTo(230, 200, 250, 120);
context.bezierCurveTo(290, -40, 300, 200, 400, 150);
context.lineTo(500, 90);
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
context.fillRect(cube_x_position, 0, canvasHolder.width, canvasHolder.height);
if(cube_x_position < canvasHolder.width)
{
cube_x_position += 1;
}
}
function firstLoaded()
{
canvasHolder = document.getElementById( 'canvas' );
context = canvasHolder.getContext('2d');
context.fillStyle = "#AAAAAA";
context.fillRect( 0, 0, 500, 500);
}