如何制作渐变填充样式

Question

<!DOCTYPE html>
<html lang="en">

    <head>
        <!-- <video class="video" src="Comp 1_3.mp4" autoplay loop muted preload="auto" height="3000px" width="3000px"></video> -->
        <meta charset="UTF-8">
        <link rel="stylesheet" href="beat.css">
        <title>Something!</title>
    </head>

    <body>
        <main>
        <img src = "image0.jpg" width="300px" height="300px">
        <h1><div class = "title">Camry</div></h1>
        <audio class="audio" id="audio" src="UncleFlexxx - Camry 3.5.mp3" controls></audio>
        <div class="information">
                    <div class = "bpm"><?php echo "<h3>BPM:</h3></div>
        <div class = "tags"><?php echo "<h3>Теги:</h3></div>
        <div class = "price"><?php echo "<h2>Цена:</h2></div>
        <div class = "views"><?php echo "<h4>Просмотры:</h4></div>
    </div>

        <div class = "description"><?php echo "<h3>Описание:</h3> <h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. A harum, sequi repellat obcaecati pariatur accusantium nostrum at recusandae repellendus maxime mollitia molestias, tempora facilis? Aliquid ducimus sunt est, animi earum voluptatum magnam consequatur non aut ratione ad, hic incidunt voluptatibus accusamus in, nulla rerum eius nihil deleniti commodi ex laudantium mollitia. Repellendus quaerat, tenetur quod dolorem expedita aut assumenda quam inventore sit molestiae reprehenderit veritatis odio necessitatibus, veniam nostrum praesentium adipisci recusandae ipsam fuga, cupiditate sapiente amet atque corrupti voluptatibus!</h4></div>
        <div class="info">
                     <div class = "author"><h3>Автор:<a href = "/hprofile.php?user_id=<?php echo $author_id; ?>"><h3>долбаеб</h3></a></div>
                     <div class = "publication_date"><?php echo "<h3>Дата публикации: Эбланская</h3></div>
        </div>
        
        
        <div>
        <canvas id="canvas" width="720"></canvas>
        </div>
        <button><a href = "<?php echo $beatlocation; ?>" download>Купить за <?php echo $price; ?>$</a></button>
        <form method = "POST" action = "/addcomment.php?id=<?php echo $_GET['id']; ?>">
        <button type = "submit" name = "comment">Оставить комментарий</button>
        <input type = "text" name = "comment_txt" placeholder = "Оставить комментарий">
        <h2><div class = "comments">Комментарии:</div></h2>
        </form>
            <script>
                document.addEventListener("DOMContentLoaded", function () {
                    function getPos(Hz, minHz, maxHz, max) {
                        if (Hz > minHz) {
                            var posMin = Math.log10(minHz) * max;
                            return (Math.log10(Hz) - Math.log10(minHz)) * max / (Math.log10(maxHz) - Math.log10(minHz));
                        } else {
                            return 0;
                        }
                    }
                    function getFFTbars(fft, barCount) {
                        var minHz = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 20;
                        var maxHz = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 12000;
                        var dataArray = new Float32Array(bufferLength);
                        fft.getFloatFrequencyData(dataArray);
                        var pos;
                        var out = [];
                        for (i in dataArray) {
                            pos = Math.round(getPos(i * 24000 / dataArray.length, minHz, maxHz, barCount));
                            if (pos < barCount) if (!out[pos] || out[pos] < dataArray[i]) out[pos] = dataArray[i];
                        }
                        for (i = 0; i < barCount; i++) {
                            if (!out[i]) {
                                var prevIndex = void 0,
                                    prevValue = void 0;
                                if ((prevIndex = i - 1) < 0) {
                                    prevIndex = 0;
                                    prevValue = 0;
                                } else {
                                    prevValue = out[prevIndex];
                                }
                                var nextIndex = void 0,
                                    nextValue = void 0;
                                for (var k = i; k < barCount; k++) {
                                    if (out[k]) {
                                        nextIndex = k;
                                        nextValue = out[k];
                                        break;
                                    }
                                }
                                if (!nextIndex) {
                                    nextIndex = barCount - 1;
                                    nextValue = 0;
                                }
                                out[i] = prevValue + (nextValue - prevValue) / (nextIndex - prevIndex);
                            }
                        }
                        return out;
                    }
                    function draw() {
                        var bars = getFFTbars(analyser, 120);
                        canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
                        canvasCtx.fillStyle = "blue";
                        canvasCtx.beginPath();
                        for (i in bars) {
                            canvasCtx.rect(i * 10, canvas.height - (bars[i] + 64) * canvas.height / 64, 8, canvas.height);
                        }
                        canvasCtx.fill();
                    }
                    var canvas, canvasCtx, audioCtx, source, analyser, bufferLength, dataArray, gainNode;
                    var initialized = false;
                    audio.addEventListener('play', function () {
                        if (!initialized) {
                            canvas = document.getElementById("canvas");
                            canvasCtx = canvas.getContext("2d");
                            audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                            source = audioCtx.createMediaElementSource(audio);
                            analyser = audioCtx.createAnalyser();
                            analyser.fftSize = 8192;
                            bufferLength = analyser.frequencyBinCount;
                            dataArray = new Float32Array(bufferLength);
                            gainNode = audioCtx.createGain();
                            source.connect(analyser);
                            source.connect(gainNode);
                            gainNode.connect(audioCtx.destination);
                            setInterval(draw, 8);
                            initialized = true;
                        }
                    });
                });
            </script>
    </main>
    </body>


</html>

我想让可视化像渐变一样是蓝色和红色。我试图通过创建渐变梯度 = context.createLinearGradient(0, 0, 460, 0) gradient.addColorStop(0.00, 'red') 但它确实有效。我没有找到解决此问题所需的信息。我希望渐变从上到下。上蓝下黄

Answer 1

gradient.addColorStop(p, 'red')

p 表示渐变开始的百分比形式。使用 (0.0, "blue") 和 (0.5,"yellow")。

创建渐变后，您必须使用以下方法将其分配给矩形：

ctx.fillStyle = gradient;
ctx.fillRect(x0, y0, x1, y1);

更多信息可以参考this。

如何制作渐变填充样式

How to make gradient fillStyle

javascript

visualization

gradient