在HTML5画布中移动一些对象

Question

In one of my HTML5 canvas element, created some elements such as rectangle, circle and an Image.

My requirement is on key press ( down, up, left, right ) need to move the image only.

Clearing the entire canvas needed when move the position of the image ?

my code looks like

var canvas;
var width;
var height;

var imgMonsterARun = new Image();
var jeep=new Image();

var mySprite = {
    x: 200,
    y: 200,
    width: 50,
    height: 50,
    speed: 200,
    color: '#000'
};

$(document).ready(function(){

    canvas=$("#canvas")[0];

    //nvas.fill
    width=canvas.width;
    height=canvas.height;





    var ctxr = canvas.getContext("2d");


    ctxr.fillStyle="white";
    ctxr.fillRect(0,0,width,height);
    ctxr.strokeStyle="black";
    ctxr.strokeRect(0,0,width,height);



    jeep.src = "images/me.jpg";

});


$(document).keydown(function(e){

    var key=e.which;
    var x=mySprite.x;
    var y=mySprite.y;
    alert(x);
    if(key=="37"){
        // left
    }
    if (key=="38"){
        // up

    }

    if (key=="39"){
        // up



    }
    if (key=="40"){
        // down

    }

});

I am new to this. I wanna move the jeep on press right

Thanks in advance

Answer 1

I strongly recommend you to read this wonderful book by Seteve and Jeff Fulton, it's online and free and it covers all the hard points with canvas programming:

http://chimera.labs.oreilly.com/books/1234000001654/index.html

Answer 2

html:

<canvas id="canvas"></canvas>

js:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'http://upload.wikimedia.org/wikipedia/en/3/35/Information_icon.svg';
canvas.width = 800;
canvas.height = 600;

var mySprite = {
    x: 200,
    y: 200,
    width: 50,
    height: 50,
    speed: 200,
    color: '#c00'
};

var keysDown = {};
window.addEventListener('keydown', function(e) {
    keysDown[e.keyCode] = true;
});
window.addEventListener('keyup', function(e) {
    delete keysDown[e.keyCode];
});

function update(mod) {
    if (37 in keysDown) {
    mySprite.x -= mySprite.speed * mod;
    }
    if (38 in keysDown) {
    mySprite.y -= mySprite.speed * mod;
    }
    if (39 in keysDown) {
    mySprite.x += mySprite.speed * mod;
    }
    if (40 in keysDown) {
    mySprite.y += mySprite.speed * mod;
    }
}

function render() {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = mySprite.color;
    ctx.drawImage(img, mySprite.x, mySprite.y, mySprite.width, mySprite.height);


}

function run() {
    update((Date.now() - time) / 1000);
    render();
    time = Date.now();
}

var time = Date.now();
setInterval(run, 10);

Demo