app嵌套html橡皮筋效果,javascript – 在Canvas中实现拉伸橡皮筋效果

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

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

谢谢

解决方法:

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

标签：javascript,html5,canvas

来源： https://codeday.me/bug/20190730/1579308.html