Прогрес бар не доходит до конца

Question

Подскажите , меняю-меняю значение , но так и не могу понять , как сделать так , чтобы прогрес бар , который белые , доходил до конца , а не до середины?

new Vue({
  el: '#app',
  data: {
    state: {
      speed: 0,
      maxSpeed: 500,
    },
  },
  directives: {
    draw: function(canvasElement, binding) {
      const {
        speed,
        maxSpeed
      } = binding.value

      const r = 80
      const x = 100
      const y = 100
      const koof = speed / maxSpeed + 0.8

      var ctx = canvasElement.getContext("2d");
      ctx.clearRect(0, 0, 400, 400);


      ctx.beginPath();
      ctx.lineWidth = 15;
      ctx.strokeStyle = "#dddddd50"
      ctx.arc(x, y, r, 0.77 * Math.PI, 2.23 * Math.PI, false)
      ctx.stroke();

      ctx.moveTo(x, y)
      ctx.beginPath();
      ctx.strokeStyle = "rgba(255, 255, 255, 0.9)"
      ctx.arc(x, y, r, 0.77 * 3.14, koof * 3.023,  false)
      ctx.stroke();
    }
  },
})

#app {
  position: relative;
  height: get-vh(270px);
  width: get-vh(300px);
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <canvas width="450" height="250" v-draw="state"></canvas>
      <br>
     <input type="range" v-model="state.speed" :max="state.maxSpeed" step="1">
      <img class="w" src="/tachometer.svg" alt="">
    </div>

Answer 1

Неверно рассчитываете длину окружности белой линии

const speed = 500,
      maxSpeed = 500;

const r = 80
const x = 100
const y = 100
const koof = speed / maxSpeed + 0.8
const fullCircleLength = 2.23;
const successCircleLength = (speed * (2.23 - 0.77) / 500) + 0.77;

var ctx = canvasElement.getContext("2d");
ctx.clearRect(0, 0, 400, 400);

ctx.beginPath();
ctx.lineWidth = 15;
ctx.strokeStyle = "#333333"
ctx.arc(x, y, r, 0.77 * Math.PI, fullCircleLength * Math.PI, false)
ctx.stroke();

ctx.moveTo(x, y)
ctx.beginPath();
ctx.strokeStyle = "rgba(255, 255, 255, 0.9)";
ctx.arc(x, y, r, 0.77 * Math.PI, successCircleLength * Math.PI, false);
ctx.stroke();

<canvas width="450" height="250" id="canvasElement"></canvas>

БЛОГ НА HUSL

Прогрес бар не доходит до конца

Ответы (1 шт):