如何把这个canvas特效蓝色背景改成透明背景？

我想要背景色自定义

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>

        body {
            width: 100%;
            margin: 0;
            overflow: hidden;
            background: hsla(277, 95%, 50%, 1);
        }
    </style>

</head>

<body>
<canvas id="canv" width="1680" height="825"></canvas>

<script>
    var c = document.getElementById('canv');
    var $ = c.getContext('2d');

    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;

    var draw = function (a, b, t) {
        $.lineWidth = 0.8;
        $.fillStyle = 'hsla(277, 95%, 55%, 1)';
        $.fillRect(0, 0, w, h);
        for (var i = -30; i < 30; i += 1) {
            $.strokeStyle = 'hsla(277, 95%, 15%, .15)';
            $.beginPath();
            $.moveTo(0, h / 2);
            for (var j = 0; j < w; j += 10) {
                $.lineTo(10 * Math.sin(i / 10) +
                    j + 0.008 * j * j,
                    Math.floor(h / 2 + j / 2 *
                        Math.sin(j / 50 - t / 50 - i / 118) +
                        (i * 0.9) * Math.sin(j / 25 - (i + t) / 65)));
            }
            ;
            $.stroke();
        }
    }
    var t = 0;

    window.addEventListener('resize', function () {
        c.width = w = window.innerWidth;
        c.height = h = window.innerHeight;
        $.fillStyle = 'hsla(277, 95%, 55%, 1)';
    }, false);

    var run = function () {
        window.requestAnimationFrame(run);
        t += 0.2;
        draw(33, 52 * Math.sin(t / 2400), t);
    };

    run();
</script>


</body>
</html>

阅读 4.2k

去除 fillStyle 和 fillRect 设置，并在每次 draw() 绘制时先清除上次绘制的线条 clearRect(0,0,w,h)。
代码如下，背景为透明而非白色，顺便，那背景不是紫色吗？？？

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        body {
            width: 100%;
            margin: 0;
            overflow: hidden;
        }
    </style>

</head>

<body>
<canvas id="canv" width="1680" height="825"></canvas>
<script>
    let c = document.getElementById('canv');
    let $ = c.getContext('2d');
    let w = c.width = window.innerWidth;
    let h = c.height = window.innerHeight;

    let draw = function (a, b, t) {
        $.clearRect(0,0,w,h);
        $.lineWidth = 0.8;
        for (let i = -30; i < 30; i += 1) {
            $.strokeStyle = 'rgba(142,0,255,0.15)';
            $.beginPath();
            $.moveTo(0, h / 2);
            for (let j = 0; j < w; j += 10) {
                $.lineTo(10 * Math.sin(i / 10) +
                    j + 0.008 * j * j,
                    Math.floor(h / 2 + j / 2 *
                        Math.sin(j / 50 - t / 50 - i / 118) +
                        (i * 0.9) * Math.sin(j / 25 - (i + t) / 65)));
            }
            $.stroke();
        }
    };
    let t = 0;

    window.addEventListener('resize', function () {
        c.width = w = window.innerWidth;
        c.height = h = window.innerHeight;
    }, false);

    let run = function () {
        window.requestAnimationFrame(run);
        t += 0.2;
        draw(33, 52 * Math.sin(t / 2400), t);
    };
    run();
</script>


</body>
</html>

如何把这个canvas特效蓝色背景改成透明背景？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？