howieyi

<style>
    body {
        margin: 0;
        padding: 0;
        color: #ffffff;
        background: #0a0c2f;
    }

    body::after {
        content: '';
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        --star-opacity: .7;
        --star-density: .8;
        background: paint(sky);
    }
</style>

<script>
    if (!CSS in window || !CSS.paintWorklet) {
        alert('您的浏览器不支持CSS houdini')
    } else {
        CSS.paintWorklet.addModule('./sky.js');
    }
</script>

class sky {
    constructor() {}
    static get inputProperties() {
        return ['--start-opacity', '--start-density']
    }

    paint(ctx, paintSize, properties) {
        console.log(arguments);

        let xMax = paintSize.width;
        let yMax = paintSize.height;

        let startOpacity = properties.get('--start-opacity');
        let startDensity = properties.get('--start-density') || 1;


    }
}
registerPaint('sky', sky);