0

Нужно чтобы после прохождения полного круга действие не повторялось. Как это сделать? Пример кода на jsfiddle

<html>
<head>
  <title>Untitled</title>
</head>
<body>
<canvas id="myCanvas" ></canvas>
<script>
  var myCanvas = document.getElementById("myCanvas"),
    context = myCanvas.getContext("2d"),
    timeLimit = 15E3,
    timeStart = (new Date).getTime(),
    canvasSize = 200,
    lineWidth = 24,
    drawX = drawY = radius = canvasSize / 2;
    radius -= lineWidth / 2;
    myCanvas.width = canvasSize;
    myCanvas.height = canvasSize;

function go() {
    context.beginPath();
    context.lineWidth = lineWidth;
    context.lineCap = "round";
    context.strokeStyle = "rgb(0, 255, 0)";
    var a = ((new Date).getTime() - timeStart) / timeLimit;
    context.clearRect(0, 0, canvasSize, canvasSize);
    context.font = '24px "Tahoma"';
    context.fillText((10 - a*10)|0, radius, drawY);
    context.arc(drawX, drawY, radius, -Math.PI / 2 + 2 * Math.PI * a, -Math.PI / 2, !1);
    context.stroke();
    1 < a && (timeStart = (new Date).getTime());
    timer = window.setTimeout(go, 50)
}
go();
</script>
</body>
</html>

2 ответа 2

0

Или так: после строчки:

context.fillText((10 - a*10)|0, radius, drawY);
if((10 - a*10)<0) return false;

Тогда в отличие от примера выше, останется пустая шкала.

4
  • Работает. Благодарю 5 мая 2018 в 13:04
  • хорошо. тогда отметьте решением + можно проголосовать, что ответ полезен, если не в курсе механики проекта..
    – Arbery
    5 мая 2018 в 13:10
  • не понимаю что сделать 5 мая 2018 в 16:07
  • ничего сложного, тут так принято, ответ полезен - помечаете его принятым или если репутации хватает, голосуете. Подробнее можно посмотреть здесь ru.stackoverflow.com/tour
    – Arbery
    5 мая 2018 в 20:08
0

Если добавить

if(a > 1) clearTimeout(timer);

после последней строчки, то таймер остановиться на одном прохождении круга.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.