我正在尝试使用“mousemove”使正方形跟随我的鼠标在 Canvas 上四处移动。

function start(){
    var canvastmp = document.getElementById("myCanvas")
    var canvas = canvastmp.getContext("2d");
    window.addEventListener('mousemove', trevor, false);
}
function trevor(pos){
    canvas.clearRect(0,0,600,400);
    var x = pos.clientX;
    var y = pos.clientY;
    canvas.fillRect(x-25,y-25,100,100);
}
window.addEventListener('load',start,false);

当我运行它时,什么都没有显示。我已经对其进行了调整并对其进行了一段时间的搜索,但似乎无法弄清楚出了什么问题。再次,对于完全的nooby问题,我深表歉意!任何帮助都将不胜感激。

另外,如果有帮助,我正在使用Chrome。

最佳答案

问题是canvas不在范围内。为了使其恢复作用域,请将trevor函数嵌入start函数内,或者将canvas上下文作为变量传递给闭包:

function start(){
    var canvastmp = document.getElementById("myCanvas")
    var ctx = canvastmp.getContext("2d");
    window.addEventListener('mousemove', function(pos){trevor(ctx,pos)}, false);
}
function trevor(ctx, pos){
    ctx.clearRect(0,0,600,400);
    var x = pos.clientX;
    var y = pos.clientY;
    ctx.fillRect(x-25,y-25,100,100);
}
window.addEventListener('load',start,false);

或者,使用一种更像对象的方法:
function trevor(ctx) {
    function moveHandler(pos) {
        ctx.clearRect(0,0,600,400);
        ctx.fillRect(pos.clientX - 25, pos.clientY - 25, 100, 100);
    }
}
var myTrevor = trevor((document.getElementById('myCanvas')).getContext('2d'));
window.addEventListener('load', myTrevor.moveHandler, false);

这样做的好处是上下文始终是相关的。 trevor只知道给定的上下文,设置事件处理程序的代码也检索该上下文。

关于javascript - Canvas 上的MouseMove问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12879622/

10-11 12:51
查看更多