我看到很多人都有同样的问题,但解决方案都没有帮助我。所以我发布了这个问题。 我想在后台移动我的第二张照片“g_fighter.png”。所以我现在写了代码,它在画布上绘制图像,但在按键上,图片不动!如果有人能在我的代码中找到缺陷,那将会非常有帮助 `
<html>
<body onload=start()>
<center>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">Your browser does not support canvas tag.</canvas>
</center>
<script>
//Background Image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function(){
bgReady = true;
}
bgImage.src="img/heic0706a.jpg";
//Friend Image
var fReady = false;
var fImage = new Image();
fImage.onload = function(){
fReady = true;
}
fImage.src="img/g_fighter.png";
//Game objects
var hero = {
speed:1,
x:200,
y:390
};
var keysDown = {};
addEventListener("keydown", function(e){
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function(e){
delete keysDown[e.keyCode];
}, false);
function update(modifier){
if(38 in keysDown){
hero.y -= hero.speed * modifier;
}
if(40 in keysDown){
hero.y += hero.speed * modifier;
}
if(37 in keysDown){
hero.x -= hero.speed * modifier;
}
if(39 in keysDown){
hero.x += hero.speed * modifier;
}
}
function render(c){
if(bgReady == true){
c.drawImage(bgImage,0,0);
}
if(fReady == true){
c.drawImage(fImage,hero.x,hero.y,100,100);
}
}
function setImage(then){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var now = Date.now();
var delta = now-then;
update(delta/1000);
render(ctx);
then = now;
requestAnimationFrame(setImage);
}
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
function start(){
var Then = Date.now();
setImage(Then);
}
</script>
</body>
</html>
`
答案 0 :(得分:1)
看起来我设置的小提琴:
http://jsfiddle.net/7fsw81mp/14/
function render(c){
c.clearRect(0,0,600,600)
if(fReady == true){
c.drawImage(fImage,hero.x,hero.y,100,100);
}
}
首先,我看不到你在哪里调用启动功能。
我把then参数作为外部var,所以我不需要传递每个requestAnimationFrame,我不确定它是否作为参数,否则
然后速度非常慢,每秒1个像素,意味着它几乎没有移动
此外,你必须在每次渲染时清除画布,否则你的英雄会在他身后留下痕迹。
完整摘录:
//Friend Image
var fReady = false;
var fImage = new Image();
fImage.onload = function(){
fReady = true;
}
fImage.src="http://vignette1.wikia.nocookie.net/finalfantasy/images/0/0a/FFTS_Fighter_Sprite.png";
var then = 0;
//Game objects
var hero = {
speed:10,
x:200,
y:390
};
var keysDown = {};
addEventListener("keydown", function(e){
keysDown[e.keyCode] = true;
e.preventDefault();
}, false);
addEventListener("keyup", function(e){
delete keysDown[e.keyCode];
e.preventDefault();
}, false);
function update(modifier){
if(38 in keysDown){
hero.y -= hero.speed * modifier;
}
if(40 in keysDown){
hero.y += hero.speed * modifier;
}
if(37 in keysDown){
hero.x -= hero.speed * modifier;
}
if(39 in keysDown){
hero.x += hero.speed * modifier;
}
}
function render(c){
c.clearRect(0,0,600,600)
if(fReady == true){
c.drawImage(fImage,hero.x,hero.y,100,100);
}
}
function setImage(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var now = Date.now();
var delta = now-then;
update(delta/1000);
render(ctx);
then = now;
requestAnimationFrame(setImage);
}
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
function start(){
console.log('starting');
then = Date.now();
setImage();
}
start();
<canvas id="myCanvas" width="600" height="600"></canvas>