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

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

HTML 和 CSS 部分：

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

  
  
    
  
      
      
  
    
  
      
      
  GeeksforGeeks
      
  A Computer Science Portal for Geeks
      
  Animated TV noise Background
  
    
  
  

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

JavaScript 部分：

• JavaScipt 代码：编写 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 代码。

  

    
    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);
        })();
    

  

输出：