Skip to main content
se añadieron 226 caracteres en el cuerpo
Origen Enlace
information
  • 6.5k
  • 3
  • 25
  • 43

var canvas = document.getElementById('canvas'); var btnInicia = document.getElementById("inicia"); var btnPara = document.getElementById("parar");

//setting width and height of the canvas canvas.width = canvasWidth; canvas.height = canvasHeight;

//Establishing a context to the canvas var ctx = canvas.getContext("2d");

//Creating an Image object for our character var character = new Image(); var characterStop = new Image(); //Setting the source to the image file character.src = "imagenes/character.png"; characterStop.src="imagenes/character.png"; btnInicia.addEventListener("click", function(){ draw();
IniciaMono();

var canvas = document.getElementById('canvas');
 var btnInicia = document.getElementById("inicia");
var btnPara = document.getElementById("parar");
 
 //setting width and height of the canvas 
 canvas.width = canvasWidth;
 canvas.height = canvasHeight; 
 
 //Establishing a context to the canvas 
 var ctx = canvas.getContext("2d");
 
 //Creating an Image object for our character 
 var character = new Image(); 
 var characterStop = new Image();
 //Setting the source to the image file 
 character.src = "imagenes/character.png";
 characterStop.src="imagenes/character.png";
btnInicia.addEventListener("click",
    function(){
        draw();     
        IniciaMono();
        

        
    });

btnPara.addEventListener("click", function(){ ctx.clearRect(x,y,width,height);

btnPara.addEventListener("click",
    function(){
        ctx.clearRect(x,y,width,height);
        
        ParaMono();
    }); 

function updateFrame(){
 //Updating the frame index 
 curFrame = ++curFrame % frameCount; 
 //Calculating the x coordinate for spritesheet 
 srcX = curFrame * width; 
}
function draw(){
 //Updating the frame 
 updateFrame();
 
 ctx.clearRect(x,y,width,height);
 //Drawing the image 
 ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height);
//Intervalo(Funcion que,Tiempo al imprimir)
}

function ParaMono(){
    updateFrame();
    clearInterval(draw);
}

function IniciaMono(){
setInterval(draw , 100);
}

function updateFrame(){ //Updating the frame index curFrame = ++curFrame % frameCount; //Calculating the x coordinate for spritesheet srcX = curFrame * width; } function draw(){ //Updating the frame updateFrame();

ctx.clearRect(x,y,width,height); //Drawing the image ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height); //Intervalo(Funcion que,Tiempo al imprimir) }

function ParaMono(){ updateFrame(); clearInterval(draw); }

function IniciaMono(){ setInterval(draw , 100); }

var canvas = document.getElementById('canvas'); var btnInicia = document.getElementById("inicia"); var btnPara = document.getElementById("parar");

//setting width and height of the canvas canvas.width = canvasWidth; canvas.height = canvasHeight;

//Establishing a context to the canvas var ctx = canvas.getContext("2d");

//Creating an Image object for our character var character = new Image(); var characterStop = new Image(); //Setting the source to the image file character.src = "imagenes/character.png"; characterStop.src="imagenes/character.png"; btnInicia.addEventListener("click", function(){ draw();
IniciaMono();

});

btnPara.addEventListener("click", function(){ ctx.clearRect(x,y,width,height);

    ParaMono();
});

function updateFrame(){ //Updating the frame index curFrame = ++curFrame % frameCount; //Calculating the x coordinate for spritesheet srcX = curFrame * width; } function draw(){ //Updating the frame updateFrame();

ctx.clearRect(x,y,width,height); //Drawing the image ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height); //Intervalo(Funcion que,Tiempo al imprimir) }

function ParaMono(){ updateFrame(); clearInterval(draw); }

function IniciaMono(){ setInterval(draw , 100); }

var canvas = document.getElementById('canvas');
 var btnInicia = document.getElementById("inicia");
var btnPara = document.getElementById("parar");
 
 //setting width and height of the canvas 
 canvas.width = canvasWidth;
 canvas.height = canvasHeight; 
 
 //Establishing a context to the canvas 
 var ctx = canvas.getContext("2d");
 
 //Creating an Image object for our character 
 var character = new Image(); 
 var characterStop = new Image();
 //Setting the source to the image file 
 character.src = "imagenes/character.png";
 characterStop.src="imagenes/character.png";
btnInicia.addEventListener("click",
    function(){
        draw();     
        IniciaMono();
        

        
    });
btnPara.addEventListener("click",
    function(){
        ctx.clearRect(x,y,width,height);
        
        ParaMono();
    }); 

function updateFrame(){
 //Updating the frame index 
 curFrame = ++curFrame % frameCount; 
 //Calculating the x coordinate for spritesheet 
 srcX = curFrame * width; 
}
function draw(){
 //Updating the frame 
 updateFrame();
 
 ctx.clearRect(x,y,width,height);
 //Drawing the image 
 ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height);
//Intervalo(Funcion que,Tiempo al imprimir)
}

function ParaMono(){
    updateFrame();
    clearInterval(draw);
}

function IniciaMono(){
setInterval(draw , 100);
}
Origen Enlace
Pedro Robles
  • 133
  • 2
  • 4
  • 17

Como detengo una interval en js?

Hola mi problema surge al momento de detener un interval en javascript, ya que aunque use el ClearInterval este continua imprimiendo.

var canvas = document.getElementById('canvas'); var btnInicia = document.getElementById("inicia"); var btnPara = document.getElementById("parar");

//setting width and height of the canvas canvas.width = canvasWidth; canvas.height = canvasHeight;

//Establishing a context to the canvas var ctx = canvas.getContext("2d");

//Creating an Image object for our character var character = new Image(); var characterStop = new Image(); //Setting the source to the image file character.src = "imagenes/character.png"; characterStop.src="imagenes/character.png"; btnInicia.addEventListener("click", function(){ draw();
IniciaMono();

});

btnPara.addEventListener("click", function(){ ctx.clearRect(x,y,width,height);

    ParaMono();
});

function updateFrame(){ //Updating the frame index curFrame = ++curFrame % frameCount; //Calculating the x coordinate for spritesheet srcX = curFrame * width; } function draw(){ //Updating the frame updateFrame();

ctx.clearRect(x,y,width,height); //Drawing the image ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height); //Intervalo(Funcion que,Tiempo al imprimir) }

function ParaMono(){ updateFrame(); clearInterval(draw); }

function IniciaMono(){ setInterval(draw , 100); }