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

Question

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

有关如何做到这一点的任何建议？我不太确定如何模仿效果:)

谢谢

Answer 1

使用SVG比使用canvas更容易,特别是使用像Raphaël这样的库.看看这个演示 - 与你想做的事情没什么不同.如果你使用Raphaël那么它将比canvas更便携,因为它甚至可以在IE 6上运行(使用VML).

更新:

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

好的,看看这个演示.它应该是你所解释的,或者至少应该让你开始.这是代码:

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);