Реализация эффекта растягивания резинкой в ​​Canvas

Question

Я делаю простой прототип на холсте HTML5 и хочу нарисовать рогатку.Когда кто-то нажимает вниз и тянет назад, я хочу, чтобы резиновая полоса растягивалась.Это не обязательно должно быть идеально.

Есть предложения, как мне это сделать?Я не слишком уверен, как имитировать эффект:)

спасибо

Answer 1

Это было бы проще сделать с SVG, чем с canvas, особенно с использованием такой библиотеки, как Raphaël . Смотрите эту демонстрацию - это не очень отличается от того, что вы хотите сделать. Если вы используете Raphaël, то он будет гораздо более переносимым, чем canvas, потому что он будет работать даже в IE 6 (с использованием VML).

Обновление:

(Исправлен пример Fiddle - он имел некоторые устаревшие зависимости - теперь он исправлен)

Хорошо, см. ЭТО ДЕМО . Это должно быть в значительной степени то, что вы объяснили, или, по крайней мере, это должно помочь вам начать. Вот код:

var R = Raphael(10, 10, 400, 400);

var l = R.path("M100 200L200 200L300 200");
l.attr({
    stroke: 'red',
    'stroke-width': 4
});

var c = R.circle(200, 200, 10).attr({
    fill: 'white',
    stroke: 'red',
    'stroke-width': 4
});

function move(dx, dy) {
    var x = 200 + dx, y = 200 + dy; 
    this.attr({cx: x, cy: y});
    l.attr({path: "M100 200L"+x+" "+y+"L300 200"});
}
function start() {
    c.stop();
    l.stop();
}
function end() {
    this.animate({cx: 200, cy: 200}, 2000, "elastic");
    l.animate({path: "M100 200L200 200L300 200"},
             2000, "elastic");
}
c.drag(move, start, end);

Answer 2

многие из этих видов поведения были реализованы и описаны в сообществе Flash.У папы Крейзи есть несколько хороших статей + код по эластичности.http://www.krazydad.com/bestiary/bestiary_springyTitles.html