在 HTML5 画布中移动一些对象答案

【问题标题】：Move some objects in HTML5 canvas在 HTML5 画布中移动一些对象
【发布时间】：2014-03-28 21:49:31
【问题描述】：

在我的一个 HTML5 画布元素中，创建了一些元素，例如矩形、圆形和图像。

我的要求是按键（下、上、左、右）只需要移动图像。

移动图像位置时需要清除整个画布？

我的代码看起来像

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

    }

});

我是新手。我想按右移动吉普车

提前致谢

【问题讨论】：

你能推荐一个图书馆吗？
你能做一个小提琴吗？
+1 投反对票的人能否解释他们投反对票的原因..

标签： javascript html canvas html5-canvas

【解决方案1】：

我强烈建议您阅读 Seteve 和 Jeff Fulton 这本精彩的书，它是在线免费的，它涵盖了画布编程的所有难点：

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

【讨论】：

【解决方案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

【讨论】：