3

Cuándo corro el código en el navegador la consola me dice:

"Uncaught TypeError: this.dibujar is not a function".

Código HTML:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>DAIGHT</title>
        <script type="text/javascript" src="DAIGHT.js"></script>
    </head>
    <body>
        <canvas width="600" height="600" id="c"></canvas>
        <script type="text/javascript">
            inicio();
        </script>
    </body>
    </html> 

Código Js:

var soloId, canvas;
var dinosaur;

var Imagen = function (u, x, y) {

    this.iURL = u;
    this.iOK = false;
    this.pos = [x, y];
    this.i;
    this.creari(this.i, this.iURL);
    this.dibujar;
    this.confirmar;
}

Imagen.prototype.creari = function (i, u) {

    i = new Image();
    i.src = u;
    i.onload = this.confirmar;
}

Imagen.prototype.confirmar = function ()
{
    if (this.iOK == false)
    {
        this.iOK = true;
    }

    this.dibujar(this.i);
}

Imagen.prototype.dibujar = function (i)
{
    if (this.iOK == true)
    {
        canvas.drawImage(i, this.pos[0], this.pos[1]);
    }
}

function inicio(){

    soloId = document.getElementById("c");
    canvas = soloId.getContext("2d");

    dinosaur = new Imagen("Dinosaur.png", 555, 555);

}

Muchas Gracias por su ayuda.

1 respuesta 1

2

Uno de los problemas son estas líneas:

this.dibujar;
this.confirmar;

Si son funciones tienes que invocarlas usando paréntesis, así

this.dibujar();
this.confirmar();

Pero hay más problemas en tu código, te dejo un ejemplo de como podría ser:

var Imagen = function(canvas, url, x, y) {
    this.canvas = canvas;
    this.pos = {x, y};
    this.crearImagen(url);
}

Imagen.prototype.crearImagen = function(url) {
    var self = this;
    this.imagen = new Image();
    this.imagen.onload = function() {
        self.dibujar();
    };
    this.imagen.src = url;
}

Imagen.prototype.dibujar = function() {
    this.canvas.drawImage(this.imagen, this.pos.x, this.pos.y);
}

function inicio() {
    var canvas = document.getElementById("c").getContext("2d");

    var dinosaur = new Imagen(canvas, "Dinosaur.png", 555, 555);
}

inicio();
4
  • Me gusta tu código, gracias. Podrías explicarme por qué creas la variable self en vez de poner directamente this? Commented el 17 ago. 2016 a las 18:45
  • Es que en JavaScript this tiene un comportamiento diferente a otros lenguajes. En este caso cuando onload sea invocado puedes verificar con el debugger que this no es el objeto Imagen que esperarías por eso guardo una copia en la variable self (el nombre no tiene nada de especial)
    – Diego
    Commented el 17 ago. 2016 a las 19:50
  • Gracias otra vez, otra pregunta: Por qué para la posición de "x" y de "y" usas un objeto tipo JSON en vez de un array? Commented el 18 ago. 2016 a las 21:53
  • Bueno, eso es preferencia personal, es más clara la intención cuando lees pos.x que pos[0]. Por cierto no es un objeto JSON, es un objeto regular de JavaScript.
    – Diego
    Commented el 18 ago. 2016 a las 22:17

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.