Длина строки в ошибке аудио-визуализатора - PullRequest
Новая
       27

Длина строки в ошибке аудио-визуализатора

0 голосов
/ 08 октября 2019

У меня есть ползунок, который может настроить радиус для визуализатора звука, который я сделал. Однако, когда вы настраиваете ползунок, полосы, которые его окружают, расширяются до краев холста и фактически не отображают звук. Визуализатор работает нормально, если вы не касаетесь этого ползунка. Код Radius Slider:

Вот ссылка на то, как он выглядит: https://people.rit.edu/sns9181/igme330/CookieClickerAudioVisualizer/Main.html

Мой код: 

// set to the size of device
    canvas = document.querySelector("canvas");
    ctx = canvas.getContext("2d");
    ctxWidth = canvas.width;
    ctxHeight = canvas.height;

    // find the center of the window
    xCenter = ctxWidth / 2;
    yCenter = ctxHeight / 2;
    //draw a circle
    ctx.beginPath();
    ctx.arc(xCenter,yCenter,radius,0,2*Math.PI);
    ctx.stroke();

    analyser.getByteFrequencyData(frequencyArray);
    for(var i = 0; i < bars; i++)
    {
        //divide a circle into equal parts
        rads = Math.PI * 2 / bars;

        //Makes the Bar's Height move with the frequency
        barHeight = frequencyArray[i]*0.7;

        //Starts the bar from the circle
        x = xCenter + Math.cos(rads * i) * (radius);
        y = yCenter + Math.sin(rads * i) * (radius);

        //Ends the bar from the bar height
        x_end = xCenter + Math.cos(rads * i)*(radius + barHeight);
        y_end = yCenter + Math.sin(rads * i)*(radius + barHeight);

        //Draws the Bar
        drawBar(x, y, x_end, y_end, barWidth, frequencyArray[i]);
    }

    // for drawing a bar
    function drawBar(x1, y1, x2, y2, width, frequency)
    {   
        ctx.strokeStyle = lineColor;
        ctx.lineWidth = width;
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2);
        ctx.stroke();
        ctx.closePath();
    }
//Radius Slider
    let radiusSlider = document.querySelector("#radiusSlider");
    radiusSlider.oninput = e => 
    {
        radius = e.target.value;
        radiusLabel.innerHTML = Math.round((e.target.value));
    }
...