javascript - 为什么我的 javascript 代码中的变量不起作用?
问题描述
我正在使用的代码应该使图像 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。
解决方案
正如@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
;
推荐阅读
- node.js - 如何在 mongodb 中更新整个数组?
- uitableview - 从 StoryBoard 创建的 searchBar 不与 UISearchController 连接
- node.js - 不同的 Expressjs 路由方法调用执行相同的路由方法,仅在 DigitalOcean 液滴上
- python - Python For If 语句生成 SyntaxError / 列表理解
- python - 为什么我得到随机的 NAN 值
- amazon-web-services - 未触发指定为目标的 Lambda 函数
- javascript - 如何包含模型数组?
- llvm - 使用 clang 调用 LLVM CodeGen 传递时出错:尝试在没有目标机器的情况下构造 TargetPassConfig
- swift - 在 UITextField 中获取数据写入
- excel - VBA如何遍历列