Jak animować rysunek krzywa z płótna?

Question

Mam kilka punktów, które chciałem powoli narysować. Próbuję setTimeOut i efekt z tego tutorial. Ale bez tak wielkiego sukcesu.

Funkcja wygląda tak

Funkcja:

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(); 
      } 

Wokół tej funkcji istnieje a wiele innych funkcji rysowania, ale po prostu chcą tylko jeden animować.

Jak mogę powoli narysować funkcję z płótnem?

Answer 1

Są dwa sposoby na zrobienie tego, co mogę wymyślić z mojej głowy. Jednym z nich jest zasadniczo rysowanie punktu i wstrzymywanie go na określony czas przed narysowaniem drugiego punktu. To pierwszy przykład, który dostarczyłem. Druga metoda polega na rysowaniu częściowych linii do bieżącego celu, co daje o wiele bardziej płynny wygląd rysunku. Na marginesie, w obu przykładach używam requestAnimationFrame, jest to zalecany sposób wykonywania dowolnych typów animacji canvas.

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

Jeśli zauważysz, że jest trochę niepewny, można wykonać następujące czynności, aby uzyskać gładsze linie są rysowane

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