1

Buenas tardes,

¿Alguien sabe por qué me salta este error?:

"coin.render is not a function at window.onload"

El código de mi página web es el siguiente:

    var ImgMoneda = new Image();
    ImgMoneda.src = "coinAnimation.png"

    var canvas;
    var ctx;

    function sprite (opciones){

      var that = {};

      var width = opciones.width;
      var height = opciones.height;
      var image = opciones.image;

      //Función que renderiza el sprite
      var render = function(){

        drawImage(
          that.image,
          0,
          0,
          that.width,
          that.height,
          0,
          0,
          that.width,
          that.height);
      }

      return that;

    }


    var coin = sprite({
      width: 100,
      height: 100,
      image: ImgMoneda
    });

    window.onload = function(){
      canvas = document.getElementById("miCanvas");
      ctx = canvas.getContext("2d");

      coin.render();
    }
    <canvas id = "miCanvas" width = "100" height = "100"></canvas>

2 respuestas 2

2

Problemas:

  • La función render es privada, es decir, que no se puede acceder desde fuera del scope de la función sprite (que la contiene).

  • En la llamada a la función drawImage, estas intentando acceder a datos que no están guardado en la variable that. Ej: that.image, that.height, etc.

Soluciones:

  • Registrar en el objeto that la función render, para que pueda ser accesible mediante obj.render().

  • Al llamar a drawImage usar las variable del scope. (También podrías guardar estos valores en el objeto that, todo depende si quieres poder acceder a estos desde fuera)

Ejemplo:

var ImgMoneda = new Image();
ImgMoneda.src = "coinAnimation.png"

var canvas;
var ctx;

function sprite (opciones){

  var that = {};

  var width = opciones.width;
  var height = opciones.height;
  var image = opciones.image;

  //Función que renderiza el sprite
  var render = function(){

    // AQUI - Usamos las variables del scope
    drawImage(
      image,
      0,
      0,
      width,
      height,
      0,
      0,
      width,
      height);
  }

  // AQUI - Hacemos público el metodo render
  that.render = render;
  return that;
}


var coin = sprite({
  width: 100,
  height: 100,
  image: ImgMoneda
});

window.onload = function(){
  canvas = document.getElementById("miCanvas");
  ctx = canvas.getContext("2d");

  coin.render();
}
<canvas id = "miCanvas" width = "100" height = "100"></canvas>

3
  • No se debiera instanciar un objeto usando new sprite(opciones) ?
    – ffflabs
    Commented el 16 mar. 2017 a las 17:13
  • @amenadiel, el resultado es exactamente el mismo si se utiliza el operador new o no, ya que cada vez que se llama a la función sprites, se crea un nuevo objeto (eg: var that = {}).
    – Marcos
    Commented el 16 mar. 2017 a las 17:55
  • Ah, tienes razón. Si se hiciera con new no requeriría retornar that pero habría que asignar this.render en vez de that.render
    – ffflabs
    Commented el 16 mar. 2017 a las 17:58
0

En vez de ser var render = function(){} deberia ser en tu caso that.render = function(){} Y lo mismo para el resto de variables que definis dentro del render, sino no las estarias exponiendo.

var ImgMoneda = new Image();
ImgMoneda.src = "http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png";

var canvas;
var ctx;

function sprite (opciones){

  var that = {};

  that.width = opciones.width;
  that.height = opciones.height;
  that.image = opciones.image;

  //Función que renderiza el sprite
  that.render = function(){

  
    ctx.drawImage(
      that.image,
      0,
      0,
      that.width,
      that.height,
      0,
      0,
      that.width,
      that.height);
  }

  return that;

}


var coin = sprite({
  width: 300,
  height: 300,
  image: ImgMoneda
});

window.onload = function(){
  canvas = document.getElementById("miCanvas");
  ctx = canvas.getContext("2d");

  coin.render();
}
<canvas id = "miCanvas" width = "100" height = "100"></canvas>

2
  • hola me puedes explicar perdona que no se bien como hacer para poner el código de esa manera para que los demás lo puedan ejecutar? Commented el 16 mar. 2017 a las 15:32
  • Asi @OmarOmar : http://imgur.com/zI88VWB Commented el 16 mar. 2017 a las 15:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.