HTML Canvas Анимационный складной треугольник

Question

HTML Canvas Анимационный складной треугольник

0

Я нарисовал треугольник с холстом,

Я хочу анимировать треугольник "разворачивание", переместив один его угол из другого 2.

o---o---o

анимировать ниже более чем на 0,8 секунды или что-то в этом роде.

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

Как я могу это сделать? Все учебники, которые я мог найти, перемещают весь объект, а не одну точку.

Я действительно хочу оживить несколько этих открытий друг с другом в последовательности, но, надеюсь, я смогу понять это сам. :)

Nicekiwi 05 янв. 2014, в 03:20

Источник

Теги:

javascript

html

canvas

animation

1 ответ

Ещё вопросы

Philipp · Accepted Answer · 2014-01-05T00-07-00.000Z

Когда вы хотите оживить холст, вам нужно создать анимацию в кадрах. Нарисуйте один кадр, сотрите холст и нарисуйте следующий.

Чтобы получить правильное время, вы можете использовать setInterval для выполнения функции через равные промежутки времени. В функции, которую вы передаете setInterval:

стереть холст с помощью context.clearRect
скорректировать координаты
нарисуйте треугольник с новыми координатами

Добавление этого кода ниже вашего трюка:

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, который имеет много преимуществ. Но это усложняет ваше программирование, поскольку скорость анимации будет зависеть от частоты кадров, и вам либо придется компенсировать эту, либо отделить логику от рендеринга.