HTML5/CANVAS：鼠标事件问题

Question

我现在面临一个问题，鼠标事件似乎不起作用。我有一个按钮，精灵和玩家精灵，我想，当我按一下按钮，玩家要移动butit没有，那么这里的mycode的：

var canvas = document.getElementById("canvas_1"); 
ctx = canvas.getContext("2d"); 
canvas.addEventListener('mousedown', doMouseDown, true); 
var X = 100; 
var Y = 0; 
var x = 0; 
var y = 0; 
var player = new Image(); 
var butt = new Image(); 
player.src = 'images/player.png'; 
butt.src = 'images/right.png'; 
player.onload = function() { 
    ctx.drawImage(player, x, 0); 
} 
butt.onload = function() { 
    ctx.drawImage(butt, X, Y); 
} 

update = function() { 
    ctx.clearRect(0, 0); 
    ctx.drawImage(player, x, y); 
} 
setInterval(update, 1000/fps.getFPS()); 
var fps = { 
    startTime: 0, 
    frameNumber: 0, 
    getFPS: function() { 
     this.frameNumber++; 
     var d = new Date().getTime(), 
      currentTime = (d - this.startTime)/1000, 
      result = Math.floor((this.frameNumber/currentTime)); 

     if (currentTime > 1) { 
      this.startTime = new Date().getTime(); 
      this.frameNumber = 0; 
     } 
     return result; 

    } 
}; 

function doMouseDown(event) { 
    var mousePos = getMousePos(canvas, event); 

    if ((mousePos.x >= X && mousePos.x <= X + butt.width) && (mousePos.y >= Y && mousePos.y <= Y + butt.height)) { 
     x += 4; 
    } 
} 

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
} 

Answer 1

你在做什么是喜欢你点击时， doMouseDown函数调用并结束。
，你需要调用这个函数多次获得animation.so，
你可以尝试像
如果点击var clicked=true

，并把这个下面的代码在循环
if (clicked){
x+=4
}