MouseMove问题在画布上

Question

我试图通过"mousemove"在画布上使用鼠标左右方形.

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，或者将画布上下文作为变量传递给闭包：

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