如何在画布中创建像电视噪音一样的背景？

电视噪声是电视机或其他类似设备的接收天线没有获得传输信号时显示的随机黑白点像素图案。要创建该场景作为背景，我们需要 HTML、CSS 和 JavaScript。 HTML 用于创建画布区域，或者您可以将整个背景用作一个区域。 CSS 将适用于设计背景，JavaScript 将创建电视噪音动画。我们将逐步实现这一目标。下面的步骤一一提到和描述。
HTML 和 CSS 部分：

• HTML 代码：在网页中创建一个 HTML5 画布。

html

 

    
    

 

    
    
GeeksforGeeks
    
A Computer Science Portal for Geeks
    
Animated TV noise Background

 

• CSS 代码：编辑 canvas 元素的 CSS 以使其全屏显示。

html

JavaScript 部分：

• JavaScript 代码：编写 JavaScript 代码来创建动画电视噪音效果。

javascript

    var canvas = document.getElementById('canvas'),
              
    /* The getContext() method returns an object
    that provides methods and properties for
    drawing on the canvas. */
    ctx = canvas.getContext('2d');
  
    /* Setting canvas width and height equal to
    window screen width and height. */
    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    resize();
    window.onresize = resize;
  
    // Function to generate noise effect
    function generate_noise(ctx) {
        var w = ctx.canvas.width,
        h = ctx.canvas.height,
                  
        /* This creates a new ImageData object
        with the specified dimensions(i.e canvas
        width and height). All pixels are set to
        transparent black (i.e rgba(0,0,0,0)). */
        idata = ctx.createImageData(w, h),
                  
        // Creating Uint32Array typed array
        buffer32 = new Uint32Array(idata.data.buffer),
        buffer_len = buffer32.length,
        i = 0
         
        for ( ; i < buffer_len; i++)
            buffer32[i] =
                ((255 * Math.random()) | 0) << 24;
              
        /* The putImageData() method puts the image
        data (from a specified ImageData object)
        back onto the canvas. */
        ctx.putImageData(idata, 0, 0);
    }
  
    // Creating animation effect
    var toggle = true;
    (function loop() {
        toggle = !toggle;
        if (toggle) {
              
            // Loop function is called each time
            // before next repaint.
            requestAnimationFrame(loop);
            return;
        }
    generate_noise(ctx);
    requestAnimationFrame(loop);
    })();

完整的解决方案：以下示例演示了创建电视噪音等背景。在本节中，我们只是结合了 HTML、CSS 和 JavaScript 代码。

html

 

    
    TV noise Background
    
        #canvas {
            z-index: -100;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.8;
            background-color: #fff;
        }
         
        h1 {
            color: green;
            font-size: 50px;
            margin-bottom: 0;
        }
         
        body {
            text-align: center;
        }
    

 

    
    GeeksforGeeks
    A Computer Science Portal for Geeks
    Animated TV noise Background
 
    
        var canvas = document.getElementById('canvas'),
             
        /* The getContext() method returns an object
        that provides methods and properties for
        drawing on the canvas. */
        ctx = canvas.getContext('2d');
 
        /* Setting canvas width and height equal
        to window screen width and height. */
        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resize();
        window.onresize = resize;
 
        // Function to generate noise effect
        function generate_noise(ctx) {
            var w = ctx.canvas.width,
                h = ctx.canvas.height,
                 
            /* This creates a new ImageData object
            with the specified dimensions(i.e canvas
            width and height). All pixels are set to
            transparent black (i.e rgba(0,0,0,0)). */
            idata = ctx.createImageData(w, h),
                 
            // Creating Uint32Array typed array
            buffer32 = new Uint32Array(idata.data.buffer),
            buffer_len = buffer32.length,
            i = 0
             
            for (; i < buffer_len; i++)
                buffer32[i] =
                    ((255 * Math.random()) | 0) << 24;
             
            /* The putImageData() method puts the
            image data (from a specified ImageData
            object) back onto the canvas. */
            ctx.putImageData(idata, 0, 0);
        }
 
        // Creating animation effect
        var toggle = true;
        (function loop() {
            toggle = !toggle;
            if (toggle) {
             
                // Loop function is called each
                // time before next repaint
                requestAnimationFrame(loop);
                return;
            }
            generate_noise(ctx);
            requestAnimationFrame(loop);
        })();
    

 

输出：