3
我終於找到了如何動畫繪製貝塞爾曲線。我已經看到其他解決方案使用二次曲線來做到這一點，但我所做的事情需要4分，並且b樣條太難找到隨機地塊，再加上它是我想要做的事情;與貝齊爾Cuves。如何在html5畫布中繪製動畫貝塞爾曲線時保持流暢的線條
我的問題是我找不到一個好的，快速的速度沒有看到點或線。我必須錯過一些東西。有人能指出我的錯誤還是更有效的方法，以便在任何時間/速度下順利進行？我需要的是穩定，比去下面的例子快，但如果我這樣做了差距越來越大......與代碼
小提琴：如果需要更多的信息https://jsfiddle.net/qzsy8aL7/
//B(t) = (1 - t)^3P0 + 3t(1 - t)^2 P1 + 3t^2(1 - t)P2 + t^3P3
function animatedBSpline(context, points, t) {
// Draw curve segment
context.beginPath();
context.moveTo(
Math.pow(1 - t, 3) * points[0].x +
3 * t * Math.pow(1 - t, 2) * points[1].x +
3 * Math.pow(t, 2) * (1 - t) * points[2].x +
Math.pow(t, 3) * points[3].x,
Math.pow(1 - t, 3) * points[0].y +
3 * t * Math.pow(1 - t, 2) * points[1].y +
3 * Math.pow(t, 2) * (1 - t) * points[2].y +
Math.pow(t, 3) * points[3].y
);
// Draw spline segemnts
context.lineTo(
Math.pow((1 - t) + 0.001, 3) * points[0].x +
3 * (t + 0.001) * Math.pow((1 - t) + 0.001, 2) * points[1].x +
3 * Math.pow(t + 0.001, 2) * (1 - (t + 0.001)) * points[2].x +
Math.pow(t + 0.001, 3) * points[3].x,
Math.pow((1 - t) + 0.001, 3) * points[0].y +
3 * (t + 0.001) * Math.pow((1 - t) + 0.001, 2) * points[1].y +
3 * Math.pow(t + 0.001, 2) * (1 - (t + 0.001)) * points[2].y +
Math.pow(t + 0.001, 3) * points[3].y
);
//33d4ff
context.strokeStyle="#35bb23";
context.lineJoin="round";
context.lineWidth=2;
context.fillStyle = "black";
context.stroke();
context.fill();
// Keep going until t = 1
if (t < 1) requestAnimationFrame(function() {
animatedBSpline(context, points, t + 0.01);
});
else
context.closePath();
}
請告訴我。我一整天都在這。
要添加： 如果我只是徹底繪製它與這些情節，而不是動畫它做的，顯然看起來很好，但只是想指出。它的東西與我的動畫方式我只是不知道。
那麼我注意到，在每個段您調用'context.beginPath（）'和'context.moveTo（...）'這將導致段變得不相交。您應該只在曲線的開頭調用這兩種方法，而不是在每一個點上。 –
我可以在哪裏放？如果我把它放在其他任何地方測試它，或者用多條小線條填充黑色（我認爲）或者什麼都不做。 – Grant
https://jsfiddle.net/qzsy8aL7/1/我不知道這是你要做什麼，但我讓這條線連續並刪除了令人討厭的'eval'，而不是將'points'變成一個數組。 –