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

Answer 2

您的canvas变量在函数start中定义，但是当您在函数trevor中引用它时，它超出了范围。

从两个函数中定义它，因此它在两者的范围内，并且这可以工作。

请参阅 - http://jsfiddle.net/sync/mE4B4/

var canvas;

function start() {
    var canvastmp = document.getElementById("myCanvas");
    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);

Answer 3

您提到您正在使用Chrome - 如果是这样，请查看内置检查器（工具＆gt;开发人员工具）。 Console选项卡显示错误。如果你看一下那里，你会看到像Canvas not defined这样的东西，这是一个有用的提示。

'canvas'var超出了范围。以下内容适用：

function mousemove(pos) {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.clearRect(0,0,600,400);

  var x = pos.clientX;
  var y = pos.clientY;

  ctx.fillStyle="#FF0000";
  ctx.fillRect(x-25,y-25,50,50);
}

window.addEventListener('mousemove', mousemove, false);

<强> LIVE DEMO HERE

MouseMove问题在画布上

3 个答案: