HTML Canvas 动画折叠三角形

Question

我用canvas画了一个三角形，

http://jsfiddle.net/nicekiwi/GfM6M/

我想通过将三角形的一个角从另一个角移开来为三角形“展开”设置动画。

o---o---o 

动画到 0.8 秒以下。

    o    
   / \
  /   \
 /     \
o-------o

我该怎么做？我能找到的所有教程都移动整个对象，而不是移动它的一个点。

我真的很想按顺序制作一些这样的开场动画，但希望我自己能解决这个问题。 :)

Answer 1

当您想要为画布制作动画时，您需要在帧中创建动画。绘制一帧，擦除画布，然后绘制下一帧。

要获得正确的时间，您可以使用setInterval 定期执行一个函数。在你传递给 setInterval 的函数中：

1. 用context.clearRect擦除画布
2. 调整坐标
3. 用新坐标画一个三角形

在你的下面添加这段代码就可以了：

var x = 300;

// execute a function every 50ms
window.setInterval( function() {
    // erase the canvas
    var context = document.getElementById('canvas').getContext('2d');
    context.clearRect(0, 0, 900, 500);
    // update the coordinates
    x++;
    if (x > 500) x = 300;
    // redraw with new coordinates
    draw_triangle('410','48',x,'86','420','135');
}, 50);

更专业的方法是使用requestAnimationFrame 而不是setInterval，它有很多优点。但这会使您的编程更加复杂，因为动画速度将取决于帧速率，您要么需要对此进行补偿，要么将逻辑与渲染解耦。