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