キャンバスで曲線の描画をアニメーション化する方法は？

Question

私はゆっくりと描きたいと思っている点がたくさんあります。私はsetTimeOutとその効果をtutorialから試してみます。しかし、あまり成功することはありません。そこにこの機能を他の多くの描画関数の周り

var myFunction = function(ctx, grid, points) { 
       ctx.beginPath(); 
       ctx.moveTo(points[0].x, points[0].y); 
       ctx.lineWidth = 2; 
       ctx.strokeStyle = '#2068A8'; 
       ctx.fillStyle = '#2068A8'; 
       var count = 1; 
       for (count = 1; count < points.length; count++) { 
        ctx.lineTo(points[count].x , points[count].y); 
       } 
       ctx.stroke(); 
      } 

しかし、私はただ一つだけをアニメーション化する：

機能は、この

機能のように見えます。

どのように私はゆっくりとキャンバスで機能を描くことができますか？

Answer 1

私の頭の上から考えることができるこの2つの方法があります。 1つは基本的に点を描き、もう一方の点を描く前にある程度の時間、一時停止しています。これが私が提供した最初の例です.2番目の方法では、現在のターゲットに線を引いて、より滑らかな描画の外観にします。私はどちらの例でもrequestAnimationFrameを使用していますので、どのようなタイプのキャンバスアニメーションでもお勧めします。

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"); 

canvas.width = 400; 
canvas.height = 200; 

var points = [], 
    currentPoint = 1, 
    nextTime = new Date().getTime()+500, 
    pace = 200; 

// make some points 
for (var i = 0; i < 50; i++) { 
    points.push({ 
     x: i * (canvas.width/50), 
     y: 100+Math.sin(i) * 10 
    }); 
} 

function draw() { 

    if(new Date().getTime() > nextTime){ 
     nextTime = new Date().getTime() + pace; 

     currentPoint++; 
     if(currentPoint > points.length){ 
      currentPoint = 0; 
     } 
    } 
    ctx.clearRect(0,0,canvas.width, canvas.height); 
    ctx.beginPath(); 
    ctx.moveTo(points[0].x, points[0].y); 
    ctx.lineWidth = 2; 
    ctx.strokeStyle = '#2068A8'; 
    ctx.fillStyle = '#2068A8'; 
    for (var p = 1, plen = currentPoint; p < plen; p++) { 
     ctx.lineTo(points[p].x, points[p].y); 
    } 
    ctx.stroke(); 

    requestAnimFrame(draw); 
} 

draw(); 

Live Demo

あなたはそれが少し途切れ途切れで気付いた場合、あなたは

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"); 

canvas.width = 400; 
canvas.height = 200; 

var points = [], 
    currentPoint = 1, 
    speed = 2, 
    targetX = 0, 
    targetY = 0, 
    x = 0, 
    y = 0; 

// make some points 
for (var i = 0; i < 50; i++) { 
    points.push({ 
     x: i * (canvas.width/50), 
     y: 100+Math.sin(i) * 10 
    }); 
} 

// set the initial target and starting point 
targetX = points[1].x; 
targetY = points[1].y; 
x = points[0].x; 
y = points[0].y; 

function draw() { 
    var tx = targetX - x, 
     ty = targetY - y, 
     dist = Math.sqrt(tx*tx+ty*ty), 
     velX = (tx/dist)*speed, 
     velY = (ty/dist)*speed; 

     x += velX 
     y += velY; 

    if(dist < 1){ 
     currentPoint++; 

     if(currentPoint >= points.length){ 
      currentPoint = 1; 
      x = points[0].x; 
      y = points[0].y; 
     } 

     targetX = points[currentPoint].x; 
     targetY = points[currentPoint].y; 
    } 

    ctx.clearRect(0,0,canvas.width, canvas.height); 
    ctx.beginPath(); 
    ctx.moveTo(points[0].x, points[0].y); 
    ctx.lineWidth = 2; 
    ctx.strokeStyle = '#2068A8'; 
    ctx.fillStyle = '#2068A8'; 

    for (var p = 0, plen = currentPoint-1; p < plen; p++) { 
     ctx.lineTo(points[p].x, points[p].y); 
    } 
    ctx.lineTo(x, y);  
    ctx.stroke(); 

    requestAnimFrame(draw); 
} 

draw(); 

Live Demo