Question

我试图在JavaScript中鬃毛成圈，因此将其大小相应地更改为变量。但是，圆只有在变量增加时才改变其大小，并且保持不变。

window.onload = function () {
  var ctx = canvas.getContext("2d");
  function renderFrame() {
    var grd = ctx.createLinearGradient(0, 0, WIDTH, 0);
    grd.addColorStop(0, "#FF5733");
    grd.addColorStop(0.5, "#C70039");
    grd.addColorStop(1, "#900C3F");

    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, WIDTH, HEIGHT);

    ctx.arc(WIDTH / 2, HEIGHT / 2, dataArray[80], 0, 2 * Math.PI);
    ctx.fillStyle = "#FFFFFF";
    ctx.fill();
  }
  renderFrame();
};

我的变量是dataArray[80]。因此，我们的想法是，一旦fillRect()被平移，就应该在画布上用renderFrame()来使圆圈变椭圆形，因此应该以radius =绘制圆弧到我的变量的当前值。但是，仅当我的值增加时，弧才会重绘。我相信它确实会以较小的尺寸重绘，并且我尝试使它变色，以使它看到，但是这改变了我看到的圆圈的颜色。

这是完整的代码：

（它是音频频谱，请选择一个音频文件以查看它工作中）

<html>

<head>
    <style>
        #thefile {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 100;
        }

        #canvas {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        audio {
            position: fixed;
            left: 10px;
            bottom: 10px;
            width: calc(100% - 20px);
        }
    </style>
    <script>
        window.onload = function () {
            var file = document.getElementById("thefile");
            var audio = document.getElementById("audio");

            file.onchange = function () {
                var files = this.files;
                audio.src = URL.createObjectURL(files[0]);
                audio.load();
                audio.play();
                var context = new AudioContext();
                var src = context.createMediaElementSource(audio);
                var analyser = context.createAnalyser();

                var canvas = document.getElementById("canvas");
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                var ctx = canvas.getContext("2d");

                src.connect(analyser);
                analyser.connect(context.destination);

                analyser.fftSize = 256;

                var bufferLength = analyser.frequencyBinCount;
                console.log(bufferLength);

                var dataArray = new Uint8Array(bufferLength);

                var WIDTH = canvas.width;
                var HEIGHT = canvas.height;

                var barWidth = WIDTH / 100;
                var barHeight;
                var x = 0;
                var grd = ctx.createLinearGradient(0, 0, WIDTH, 0);
                grd.addColorStop(0, "#FF5733");
                grd.addColorStop(0.5, "#C70039");
                grd.addColorStop(1, "#900C3F");

                function renderFrame() {

                    requestAnimationFrame(renderFrame);

                    x = (WIDTH / 100) * 39;

                    analyser.getByteFrequencyData(dataArray);
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.fillStyle = grd;
                    ctx.fillRect(0, 0, WIDTH, HEIGHT);
                    
                    //de crescut creste dar de scazut ...
                    ctx.arc(WIDTH / 2, HEIGHT / 2, dataArray[15], 0, 2 * Math.PI);
                    ctx.fillStyle ="#FFFFFF";
                    ctx.fill();

                    for (var i = 3; i < 110; i += 5) {
                        barHeight = dataArray[i] + 10;
                        ctx.fillStyle = grd;
                        ctx.fillRect(x, HEIGHT / 2 - barHeight + dataArray[80] / 4, barWidth, barHeight);
                        x += barWidth - 1;
                    }
                    x -= barWidth + 1;
                    for (var i = 3; i < 110; i += 5) {
                        barHeight = dataArray[i] * (-1) - 10;
                        ctx.fillStyle = grd;
                        ctx.fillRect(x, HEIGHT / 2 - barHeight - 1 - dataArray[80] / 4, barWidth, barHeight);
                        x -= barWidth - 1;
                    }
                }

                audio.play();
                renderFrame();
            };
        };

    </script>
</head>

<body>
    <div id="content">
        <input type="file" id="thefile" accept="audio/*" />
        <canvas id="canvas"></canvas>
        <audio id="audio" controls></audio>
    </div>
</body>

</html>

很抱歉，如果我无法正确解释我的问题所在。

canvas arc（）半径只会增加JavaScript

0 个答案: