JS Как изменить значение startin на холсте Gauge - PullRequest
Новая
       20

JS Как изменить значение startin на холсте Gauge

0 голосов
/ 22 марта 2019

Я создаю датчик холста в javascript, но я хочу, чтобы начальное значение было 50 , начиная с моего значения датчика, начиная с 0 .

Итак, мой код HTML:

 <canvas id="gauge"></canvas>

Javascript: 

let canvas = document.getElementById('gauge');
let context = canvas.getContext('2d');

function drawGaugeSegment(canvas, context, x, y, beginPercent, endPercent, color) {
    let beginAngle = Math.PI + (Math.PI * (beginPercent / 150));
    let endAngle = 0 - (Math.PI * (1 - endPercent / 150));

    context.strokeStyle = color;
    context.lineWidth = 60;

    context.beginPath();
    context.arc(x, y, 150, beginAngle, endAngle);
    context.stroke();
}

function drawNeedle(canvas, context, x, y, percent, color) {
    context.fillStyle = color;
    context.translate(x, y);
    context.rotate(Math.PI * percent / 150 - Math.PI / 2);

    let needleWidth = 20;
    let needleLength = 80;

    context.beginPath();
    context.arc(0, 0, needleWidth / 2, 0, Math.PI);
    context.moveTo(0 - needleWidth / 2, 0);
    context.lineTo(0, 0 - needleLength);
    context.lineTo(needleWidth / 2, 0);
    context.lineTo(0 - needleWidth / 2, 0)
    context.fill();
}

function drawGauge(canvas, context, x, y) {
    drawGaugeSegment(canvas, context, x, y, 50, 70, '#FF6D6D');
    drawGaugeSegment(canvas, context, x, y, 70, 85, '#FDFF6D');
    drawGaugeSegment(canvas, context, x, y, 85, 100, '#FFD36D');
    drawGaugeSegment(canvas, context, x, y, 100, 105, '#7CFF6D');
    drawGaugeSegment(canvas, context, x, y, 105, 115, '#7CFF6D');
    drawGaugeSegment(canvas, context, x, y, 115, 150, '#6DBAFF');
    drawGaugeSegment(canvas, context, x, y, 115, 150, '#FF6D6D');
    drawNeedle(canvas, context, x, y, 50, '#fff');
}


function draw() {
    canvas.width = 550;
    canvas.height = 550;

    drawGauge(canvas, context, 225, 225);
}

draw();

А для управления сценарием я использую внешний файл JS, который вызывает gauge.min.js .

Итак, что я хочу, так как вы можете видеть, что мое начальное значение датчика это 50 , но если я поставлю начальное значение 50, представление датчика не будет действительным.

Пример значения, начинающегося с 50:

enter image description here

Может быть, как-то, как можно изменить engle или что-то вроде этого, чтобы решить эту проблему.

...