HTML | lienzo método createImageData()

El método createImageData() se usa para crear un nuevo objeto ImageData en blanco. Los píxeles del nuevo objeto son de color negro transparente por defecto.

Hay dos sintaxis del método createImageData():

  • Se utiliza para crear un nuevo objeto ImageData con las dimensiones especificadas (en píxeles):
    Sintaxis:
    var imgData = context.createImageData(width, height);
  • Se utiliza para crear un nuevo objeto ImageData con las mismas dimensiones que el objeto especificado por anotherImageData. No copia los datos de la imagen.
    Sintaxis:
    var imgData=context.createImageData(imageData);

Valores paramétricos:

  • ancho: indica el ancho (en píxeles) del nuevo objeto ImageData.
  • altura: indica la altura (en píxeles) del nuevo objeto ImageData.
  • imageData: Es el objeto anotherImageData

Ejemplo:

<!DOCTYPE html>
<html>
  
<body>
    <h3 style="color:green">GeeksforGeeks</h3>
    <h3>HTML canvas createImageData() Method</h3>
    <canvas id="myCanvas"
            width="200"
            height="200"
            style="border:2px solid ;">
  </canvas>
    <p id=g eeks></p>
    <script>
        var can = document.getElementById("myCanvas");
        var gfg = can.getContext("2d");
        var imgData = gfg.createImageData(150, 100);
  
        var i;
        for (i = 0; i < imgData.data.length; i += 3) {
            imgData.data[i + 0] = 100;
            imgData.data[i + 1] = 0;
            imgData.data[i + 2] = 0;
        }
  
        gfg.putImageData(imgData, 10, 10);
    </script>
  
</body>
  
</html>

Producción:

Navegadores compatibles:

  • Cromo
  • Mozilla Firefox
  • Internet Explorer 9.0
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por shubham_singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *