在我的一个HTML5 canvas元素中,创建了一些元素,如矩形,圆形和Image .
我的要求是按键(向下,向上,向左,向右)只需要移动图像 .
移动图像位置时清除所需的整个画布?
我的代码看起来像
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
}
});
我是新来的 . 我想按下右边的吉普车
提前致谢
2 回答
我强烈建议你阅读Seteve和Jeff Fulton这本精彩的书,它是在线和免费的,它涵盖了画布编程的所有难点:
http://chimera.labs.oreilly.com/books/1234000001654/index.html
html:
js:
Demo