7

Как сделать круг в <canvas> проблем не возникает

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 90, 0, 2 * Math.PI);
ctx.strokeStyle = "#1CB3FE"
ctx.lineWidth = 10;
ctx.stroke();
<canvas width="400" height="400" </canvas>

Проблемы - создать анимацию растущей линии прогресс-бара, то есть найти аналог в canvas атрибутам CSS и SVG stroke-dasharray и stroke-dashoffset

Вопрос:

Как повторить средствами canvas анимацию прогресс-бара с выводом процентов выполнения:

введите сюда описание изображения

svg {
  height: 90vh;
  margin: auto;
  display: block;
}

path {
  stroke-linecap: round;
  stroke-width: 6;
}

path.grey {
  stroke: #e7e7e8;
}

path.purple {
  stroke: url(#gradient);
  stroke-dasharray: 198;
  stroke-dashoffset: 198;
  animation: dash 3s ease-out forwards;
}

path.white {
  stroke: #ffffff;
  stroke-dasharray: 0px, 198px;
  stroke-dashoffset: 198;
  stroke-width: 3.5px;
  animation: dash 3s ease-out forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1; 
  }
}
<svg viewbox="0 0 100 100">
      <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
           <stop offset="0%" stop-color="#56c4fb" />
           <stop offset="100%" stop-color="#0baeff" />
       </linearGradient>
       <path class="grey" d="M30,90 A40,40 0 1,1 80,90" fill='none' />
       <path id="purple" fill='none' class="purple" d="M30,90 A40,40 0 1,1 80,90" />
       <path id="white" fill='none' class="white" d="M30,90 A40,40 0 1,1 80,90" />
 </svg>

2
  • Вот что людям подавай, оказывается))) Хороший вопрос, очень интересные ответы! И что это за "Ивотед"?)))
    – Leonid
    15 дек 2021 в 13:41
  • @Leonid а тут никогда не угадаешь, что взлетит, а что нет Сколько уже этих прогресс-баров было. А про что думаешь вот оно,- крутой вопрос-ответ, а на деле пшык :)) 15 дек 2021 в 14:21

3 ответа 3

4

var flag = false;
var time = 5000;
var step = 1;
document.addEventListener('DOMContentLoaded', function () {
    var percentage = document.querySelectorAll('.survey-results__percentage');
    var targetBox = document.querySelector('.survey-results__wrap');
    var current = document.documentElement.scrollTop;
    var target = targetBox.offsetTop - 200;
    var circles = document.querySelectorAll('.survey-results__circle');

    if (current >= target && !flag) {
        for (var i = 0; i < circles.length; i++) {
            circles[i].classList.add('active');
            outNum(parseFloat(percentage[i].dataset.percent), percentage[i]);
            flag = true;
        }
    }
});
    
function outNum(num, elem) {
  var e = elem;
  n = 0;
  var t = time / (num / step);
  var interval = setInterval(() => {
      n = n + step;
      if (n >= num) {
          clearInterval(interval);
          e.innerHTML = num.toString().replace('.', ',') + '%';
      } else {
          e.innerHTML = parseFloat(n).toFixed(2).toString().toString().replace('.', ',') + '%';
      }
  }, t);
}
.survey-results__wrap {
  display: flex;
}

.survey-results__block {
  max-width: 170px;
}

.survey-results__chart {
  margin-bottom: 10px;
  width: 170px;
  height: 170px;
}

.survey-results__circular {
  display: block;
  width: 100%;
  height: 100%;
}

.survey-results__circle {
  fill: none;
  stroke-width: 2.8;
  stroke: #58bdfc;
  animation: progress 2s ease-out forwards;
}

.survey-results__percentage {
  font-family: inherit;
  font-weight: 700;
  font-size: 8px;
  fill: #ec8d06;
  text-anchor: middle;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
<div class="survey-results__wrap">
    <div class="survey-results__block">
        <div class="survey-results__chart">
            <svg viewBox="0 0 36 36"
                 class="survey-results__circular survey-results__circular--accent">
                <path class="survey-results__circle" stroke-dasharray="98.7, 100"
                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
                <text x="18" y="20.35" class="survey-results__percentage" data-percent="98.7">
                    98,7%
                </text>
            </svg>
        </div>
    </div>
</div>

Как вариант можно и это, в stroke-dasharray менять на нужное кол-во процентов

3
  • 1
    Спасибо. Но всё таки, перед тем как дать ответ, нужно читать вопрос или хотя бы заголовок Как сделать круговой прогресс бар с помощью Canvas? Такое впечатление, что где-то скопипастили код, потому что он и образцу в SVG в вопросе, тоже не соответствует Прошу учесть мои пожелания Поставлю пока (+) авансом для будущих ответов 15 дек 2021 в 12:33
  • @Alexandr_TT Код скопипащен исключительно из моих предыдущих набросков. Хотел предложить альтернативу. Благодарю
    – Krovorgen
    15 дек 2021 в 12:34
  • я верю людям.. Если вы действительно автор, то вам будет совсем нетрудно доработать прогресс-бар в соответствии с образцом SVG в вопросе 15 дек 2021 в 12:49
3

При использовании canvas анимацию придется делать самостоятельно.

Например воспользоваться requestAnimationFrame, для вызова каждого шага отрисовки.

Для отрисовки круга, можно использовать .arc. Данный метод позволяет указать центр круга и какой сегмент в радианах нужно отрисовать

Для облегчения расчетов можно переместить систему координат в центр круга, с помощью .translate

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

Например:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const startAngle = Math.PI / 6;
const endAngle = 2 * Math.PI - startAngle;

const stepAngle = Math.PI / 108;
let curAngle = startAngle;

var grad = ctx.createLinearGradient(0, 0, 100, 0);
grad.addColorStop(0, "#56c4fb");
grad.addColorStop(1, "#0baeff");

function drawArc(start, end, strokeStyle) {
  ctx.save()
  ctx.translate(120, 120);
  ctx.rotate(Math.PI / 2);
  ctx.strokeStyle = strokeStyle;
  ctx.beginPath();
  ctx.lineWidth = 20;
  ctx.lineCap = 'round';
  ctx.arc(0, 0, 100, start, end);
  ctx.stroke();
  ctx.restore();
}

function drawCircle(angle) {
  ctx.save();
  ctx.translate(120, 120);
  ctx.rotate(Math.PI / 2);
  ctx.fillStyle = 'white';
  ctx.translate(Math.cos(angle) * 100, Math.sin(angle) * 100)
  ctx.beginPath();
  ctx.arc(0, 0, 8, 0, 2 * Math.PI);
  ctx.fill();
  ctx.restore();
}

function drawText(length, cur) {
  const percent = (cur / length * 100).toFixed(0);
  ctx.save();
  ctx.translate(120, 120);
  ctx.font = 'bold 50px sans-serif';
  ctx.textBaseline = 'middle';
  ctx.textAlign = 'center';
  ctx.beginPath();
  ctx.fillText(percent + '%', 0, 0);
  ctx.stroke();
  ctx.restore();
}

function drawSpeed(start, end, cur) {
  drawArc(start, end, 'lightgrey');
  drawArc(start, cur, grad);
  drawText(end - start, cur - start);
  if (cur !== end) {
    drawCircle(cur);
  }
}

requestAnimationFrame(function draw(t) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  curAngle = Math.min(curAngle + stepAngle, endAngle);
  drawSpeed(startAngle, endAngle, curAngle);
  if (curAngle < endAngle) {
    requestAnimationFrame(draw);
  }
})
<canvas width="400" height="400"> </canvas>

9
  • Отлично! Спасибо большое. Не хватает маленького белого кружка, который движется вместе с дугой и вывода процентов выполнения 15 дек 2021 в 13:24
  • Процентов в примере не вижу :) Они просто рассчитываются.
    – Grundy
    15 дек 2021 в 13:27
  • Ну если не трудно, сделай пожалуйста. А про проценты в вопросе есть всё же слова :)) 15 дек 2021 в 13:33
  • @Alexandr_TT, проценты тоже нарисованные имелись ввиду? Или просто само наличие числа где-то?
    – Grundy
    15 дек 2021 в 13:41
  • Ну обычно делают в прогресс-баре по центру, внутри дуги. Цифры меняются в соответствии с процентом выполнения от 0% до 100% Белый кружок я увидел! В дополнение, хорошо бы заморозить изображение на последнем кадре анимации (ну это по желанию и возможности, в вопросе этого не было) 15 дек 2021 в 13:44
2

Где-то так:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const from = 0.75 * Math.PI;
const to = 2.25 * Math.PI;
var progress = 0.65;

ctx.beginPath();
ctx.arc(100, 100, 90, from, to);
ctx.strokeStyle = "#ccc"
ctx.lineWidth = 10;
ctx.stroke();

ctx.beginPath();
ctx.arc(100, 100, 90, from, from + (to-from)*progress);
ctx.strokeStyle = "#1CB3FE"
ctx.lineWidth = 10;
ctx.stroke();
<canvas width="400" height="400" </canvas>

Менять значение progress и перерисовывать.

1
  • Спасибо, Хорошо (+) Но это статика, нужен повтор примера SVG в вопросе, сделать на Canvas 15 дек 2021 в 13:09

Ваш ответ

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

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