Question

我在HTML5画布中制作一个简单的原型，并且想要基本上画一个弹弓。当有人点击并拉回时，我希望橡皮筋伸展。它不一定非常完美。

关于我如何做到这一点的任何建议？我不太确定如何模仿效果：）

感谢

Answer 1

使用SVG比使用canvas更容易，尤其是使用像Raphaël这样的库。请参阅this demo - 这与您想要做的事情没什么不同。如果你使用Raphaël，那么它将比canvas更便携，因为它甚至可以在IE 6上运行（使用VML）。

更新

（修正了小提琴的例子 - 它有一些过时的依赖 - 现在已经修复了）

好的，请参阅THIS DEMO。它应该是你所解释的，或者至少应该让你开始。这是代码：

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社区中实现和编写。 Krazy爸爸有一些很好的文章+弹性代码。 http://www.krazydad.com/bestiary/bestiary_springyTitles.html

在Canvas中实现拉伸橡皮筋效果

2 个答案:

更新

（修正了小提琴的例子 - 它有一些过时的依赖 - 现在已经修复了）