<html>
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="450" height="250" style="border:1px solid saddlebrown"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
var rectback = new fabric.Rect({
left: -1,
top: -1,
fill: 'pink',
width: canvas.width+1,
height: canvas.height+1
});
canvas.add(rectback);
var halfcircle1 = new fabric.Circle({
radius: 25,
left: 25,
top: 206,
angle: 0,
startAngle: 0,
endAngle: Math.PI,
stroke: '#000',
strokeWidth: 0.5,
originX: 'center',
originY: 'center',
fill: 'blue'
});
canvas.add(halfcircle1);
var halfcircle2 = new fabric.Circle({
radius: 25,
left: 25,
top: 206,
angle: 180,
startAngle: 0,
endAngle: Math.PI,
stroke: '#000',
strokeWidth: 0.5,
originX: 'center',
originY: 'center',
fill: 'yellow',
});
canvas.add(halfcircle2);
var rect = new fabric.Rect({
left: -1,
top: 230,
fill: 'saddlebrown',
width: canvas.width+1,
height: 20
});
canvas.add(rect);
function animation()
{
halfcircle1.animate('angle', '+=900', {
onChange: canvas.renderAll.bind(canvas),
duration: 3000,
easing: fabric.util.ease.easeOutBounce
});
halfcircle1.animate('left', canvas.width-25, {
onChange: canvas.renderAll.bind(canvas),
duration: 3000,
easing: fabric.util.ease.easeOutBounce
});
halfcircle2.animate('angle', '+=900', {
onChange: canvas.renderAll.bind(canvas),
duration: 3000,
easing: fabric.util.ease.easeOutBounce
});
halfcircle2.animate('left', canvas.width-25, {
onChange: canvas.renderAll.bind(canvas),
duration: 3000,
easing: fabric.util.ease.easeOutBounce,
});
}
animation();
</script>
</body>
</html>
<html>
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="450" height="250" style="border:1px solid saddlebrown"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
var rectback = new fabric.Rect({
left: -1,
top: -1,
fill: 'pink',
width: canvas.width+1,
height: canvas.height+1
});
canvas.add(rectback);
var halfcircle1 = new fabric.Circle({
radius: 25,
left: 25,
top: 206,
angle: 0,
startAngle: 0,
endAngle: Math.PI,
stroke: '#000',
strokeWidth: 0.5,
originX: 'center',
originY: 'center',
fill: 'blue'
});
canvas.add(halfcircle1);
var halfcircle2 = new fabric.Circle({
radius: 25,
left: 25,
top: 206,
angle: 180,
startAngle: 0,
endAngle: Math.PI,
stroke: '#000',
strokeWidth: 0.5,
originX: 'center',
originY: 'center',
fill: 'yellow',
});
canvas.add(halfcircle2);
var rect = new fabric.Rect({
left: -1,
top: 230,
fill: 'saddlebrown',
width: canvas.width+1,
height: 20
});
canvas.add(rect);
function animation()
{
halfcircle1.animate('angle', '+=900', {
onChange: canvas.renderAll.bind(canvas),
duration: 3000,
easing: fabric.util.ease.easeOutBounce
});
halfcircle1.animate('left', canvas.width-25, {
onChange: canvas.renderAll.bind(canvas),
duration: 3000,
easing: fabric.util.ease.easeOutBounce
});
halfcircle2.animate('angle', '+=900', {
onChange: canvas.renderAll.bind(canvas),
duration: 3000,
easing: fabric.util.ease.easeOutBounce
});
halfcircle2.animate('left', canvas.width-25, {
onChange: canvas.renderAll.bind(canvas),
duration: 3000,
easing: fabric.util.ease.easeOutBounce,
});
}
animation();
</script>
</body>
</html>
Как сделать, что бы мяч доходил до границы и начинал катится в обратную сторону, бесконечно. Пробовал делать счетчик, но функции выполняются одновременно. Можно ли поставить какой то таймер или дать приоритеты функциям?
setTimeout(f, ms)
- запускает функциюf
черезms
миллисекунд.