HTML Canvas动画折叠三角形

Question

我画了一个带画布的三角形

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，它有许多优点。但它会使你的编程变得更复杂，因为动画速度将取决于帧速率，你要么需要补偿它，要么将逻辑与渲染分离。