-2

我正在使用的代码应该使图像 square.png 移动到光标处。但是，代码无法运行。

我试图在我的代码中查找拼写错误和错误。

var canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);

document.addEventListener('mousemove',function(event){

    var similarX = event.clientX;
    var similarY = event.clientY;
    document.getElementById('body').innerHTML = "x:" + similarX + ", y:" + similarY;
})
var square = new Image();
square.src = 'square.png';

window.addEventListener('load' , start);

var c = canvas.getContext('2d');
function start() {
    c.fillStyle = 'green';
    c.fillRect = 10, 10, 30, 30;
    c.drawImage(square,similarX , similarY);

    window.requestAnimationFrame(start)
}
document.body.appendChild(canvas);

这是来自 html 文档中的脚本标记之间。

正方形应该绘制在鼠标指针所在的位置，但根据 Chrome 开发工具，在“加载”函数中无法识别变量 SimilarX 和 SimilarY。

4

1 回答 1

0

正如@eepascarello 所说，您正在尝试访问范围之外的变量。您可以将similarX和similarY变量移出 mousemove 事件的范围

var canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);

//possible you want to set these to something besides 0
var similarX = 0;
var similarY = 0;

document.addEventListener('mousemove',function(event){

    similarX = event.clientX;
    similarY = event.clientY;
    document.getElementById('body').innerHTML = "x:" + similarX + ", y:" + similarY;
})
var square = new Image();
square.src = 'square.png';

window.addEventListener('load' , start);

var c = canvas.getContext('2d');
function start() {
    c.fillStyle = 'green';
    c.fillRect = 10, 10, 30, 30;
    c.drawImage(square,similarX , similarY);

    window.requestAnimationFrame(start)
}
document.body.appendChild(canvas);

请注意，这不会为您提供在 上重新定位矩形的功能mousemove，但它将使您能够无错误地加载。要更新mousemove，您可能需要做一些事情，例如start()在活动结束时调用mousemove；

于 2019-07-17T22:32:52.807 回答