PDA

View Full Version : html5canvas,js making an image movewith the click of the arrow keys along a drawnpath



jairo1218
12-23-2010, 01:59 AM
I want to know how to move a character on the path when you click the left or right arrow, but also when the left arrow is clicked it will switch between 4 images, making it look as though the characters is actually walking
left arrow = moves character to left on the path(walks to the left)
right arrow = moves character to right on the path(walks to the right)
up arrow = character jumps
This is my original code, it draws a path something like this \____
........................................................................................\




function drawMap(){
// get the canvas element using the DOM
var canvas = document.getElementById('map');

// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){

// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');

// Stroked Path
ctx.beginPath();
ctx.moveTo(0,70);
ctx.lineTo(45,115);
ctx.lineTo(250,115);
ctx.lineTo(300,135);
ctx.stroke();
ctx.closePath();

} else {
alert('Your broswer does not support Canvas, We recommend getting the latest version of google chrome for the best quality');
}
}

Can anyone point me in the right direction?