javascript - Canvas 上的 MouseMove 问题

Question

我正在尝试使用“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);

当我运行它时，什么也没有显示。我一直在调整它并搜索它一段时间，但我似乎无法弄清楚出了什么问题。再次，我很抱歉这个完全没有用的问题!非常感谢任何帮助。

此外，如果有帮助的话，我正在使用 Chrome。

Answer 1

问题是 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 只知道给定的上下文，设置事件处理程序的代码也会检索上下文。