Javascript 如何使用箭头键在画布html5上移动图像？_Javascript_Html_Canvas

Javascript 如何使用箭头键在画布html5上移动图像？

javascript html canvas

Javascript 如何使用箭头键在画布html5上移动图像？,javascript,html,canvas,Javascript,Html,Canvas,我看到很多政治公众人物都提出了同样的问题，但没有一个解决方案对我有帮助。所以我发布了这个问题。我想把我的第二张照片“g_fighter.png”移到背景上。所以我现在写的代码是在画布上绘制图像，但在按键时图片不会移动！如果有人能在我的代码中找到漏洞，那将是非常有帮助的 ` 您的浏览器不支持画布标记。 //背景图像 var bgrady=false； var bgImage=新图像（）； bgImage.onload=函数（）{ bgrady=true； } bgImage.src=“img/

我看到很多政治公众人物都提出了同样的问题，但没有一个解决方案对我有帮助。所以我发布了这个问题。我想把我的第二张照片“g_fighter.png”移到背景上。所以我现在写的代码是在画布上绘制图像，但在按键时图片不会移动！如果有人能在我的代码中找到漏洞，那将是非常有帮助的 `


您的浏览器不支持画布标记。
//背景图像
var bgrady=false；
var bgImage=新图像（）；
bgImage.onload=函数（）{
bgrady=true；
}
bgImage.src=“img/heic0706a.jpg”；
//朋友形象
var fReady=假；
var fImage=新图像（）；
fImage.onload=函数（）{
弗雷迪=真；
}
fImage.src=“img/g_fighter.png”；
//游戏物品
var hero={
速度：1，
x:200，
y:390
};
var keysDown={}；
addEventListener（“向下键控”，函数（e）{
keysDown[e.keyCode]=真；
}，假）；
addEventListener（“键控”，函数（e）{
删除keysDown[e.keyCode]；
}，假）；
函数更新（修改器）{
如果（38英寸向下）{
hero.y-=hero.speed*修饰符；
}
如果（40英寸向下）{
hero.y+=hero.speed*修改器；
}
如果（37英寸向下）{
hero.x-=hero.speed*修改器；
}
如果（39英寸向下）{
hero.x+=hero.speed*修改器；
}
}
函数渲染（c）{
如果（bgrady==true）{
c、 drawImage（bgImage，0,0）；
}
如果（fReady==true）{
c、 drawImage（fImage，hero.x，hero.y，100100）；
}
}
函数setImage（然后）{
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var now=Date.now（）；
var delta=现在和那时；
更新（delta/1000）；
渲染（ctx）；
然后=现在；
请求动画帧（setImage）；
}
var w=窗口；
requestAnimationFrame=w.requestAnimationFrame | | w.webkitRequestAnimationFrame | | w.msRequestAnimationFrame | | w.mozRequestAnimationFrame；
函数start（）{
var Then=Date.now（）；
设置图像（然后）；
}

`看看我摆好的小提琴：

首先，我看不出你在哪里调用start函数

我把then参数作为一个外部变量，所以我不需要在每个requestAnimationFrame中都传递trought，我不确定它是否作为一个参数传递

然后速度非常慢，每秒1像素，这意味着它几乎没有移动

此外，你必须清除画布上的每一个渲染，否则你的英雄将留下一条线索

完整片段：

//朋友图像
var fReady=假；
var fImage=新图像（）；
fImage.onload=函数（）{
弗雷迪=真；
}
fImage.src=”http://vignette1.wikia.nocookie.net/finalfantasy/images/0/0a/FFTS_Fighter_Sprite.png";
var=0；
//游戏物品
var hero={
速度:10,，
x:200，
y:390
};
var keysDown={}；
addEventListener（“向下键控”，函数（e）{
keysDown[e.keyCode]=真；
e、 预防默认值（）；
}，假）；
addEventListener（“键控”，函数（e）{
删除keysDown[e.keyCode]；
e、 预防默认值（）；
}，假）；
函数更新（修改器）{
如果（38英寸向下）{
hero.y-=hero.speed*修饰符；
}
如果（40英寸向下）{
hero.y+=hero.speed*修改器；
}
如果（37英寸向下）{
hero.x-=hero.speed*修改器；
}
如果（39英寸向下）{
hero.x+=hero.speed*修改器；
}
}
函数渲染（c）{
c、 clearRect（0,0600600）
如果（fReady==true）{
c、 drawImage（fImage，hero.x，hero.y，100100）；
}
}
函数setImage（）{
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var now=Date.now（）；
var delta=现在和那时；
更新（delta/1000）；
渲染（ctx）；
然后=现在；
请求动画帧（setImage）；
}
var w=窗口；
requestAnimationFrame=w.requestAnimationFrame | | w.webkitRequestAnimationFrame | | w.msRequestAnimationFrame | | w.mozRequestAnimationFrame；
函数start（）{
console.log（'starting'）；
然后=Date.now（）；
setImage（）；
}
start（）
：）如果您计划一些复杂的画布渲染项目，请给fabricjs.comohk一个镜头，我会检查！！
<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>

function render(c){
    c.clearRect(0,0,600,600)
    if(fReady == true){
        c.drawImage(fImage,hero.x,hero.y,100,100);
    }
}