javascript如何获取鼠标的坐标

u010313216 2015-04-02 03:30:00
各位大神,我想做一个指向鼠标位置的箭头arrow,定义了this.mou**和this.mouseY的属性,在onmousemove中赋值,可是在更新方法enterFrame中却获取不到,请看看是**问题了,麻烦各位了,谢谢。
function Arrow(canvas){
this.canvas = canvas;
this.ctx = canvas.getContext("2d");
this.x = 250;
this.y = 200;
this.rotation = 0;

Arrow.prototype.drawArrow = function(){
this.ctx.beginPath();
this.ctx.moveTo(-50,-25);
this.ctx.lineTo(0,-25);
this.ctx.lineTo(0,-50);
this.ctx.lineTo(50,0);
this.ctx.lineTo(0,50);
this.ctx.lineTo(0,25);
this.ctx.lineTo(-50,25);
this.ctx.lineTo(-50,-25);
this.ctx.stroke();
}

}

function RotateToMouse(canvas){
this.canvas = canvas;
this.ctx = canvas.getContext("2d");
this.arrow;

this.mouseX;
this.mouseY;

RotateToMouse.prototype.init = function(){
this.arrow = new Arrow(canvas);
this.ctx.translate(this.arrow.x,this.arrow.y);

var self = this;
this.intervalID = setInterval(function(){self.enterFrame();},1000/2);

canvas.addEventListener("mousemove",function(e){
return self.getMousePosition(e);
});
}

RotateToMouse.prototype.getMousePosition = function(event){
event = event || window.event;
if(event.pageX || event.pageY){
this.mouseX = event.pageX;
this.mouseY = event.pageY;
}else{
this.mouseX = event.clientX + document.body.scrollLeft - document.body.clientLeft;
this.mouseY = event.clientY + document.body.scrollTop - document.body.clientTop;
}
}

RotateToMouse.prototype.enterFrame = function(){
this.arrow.rotation = Math.atan2(this.mouseY - arrow.y, this.mouseX - arrow.x);
this.ctx.rotate(this.arrow.rotation * Math.PI/180);
this.arrow.drawArrow();
}
this.init();
}

http://bbs.html5cn.org/forum.php?mod=viewthread&tid=86961&extra=
...全文
176 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
u010313216 2015-04-20
  • 打赏
  • 举报
回复
请问,如果我现在想让箭头向我鼠标所在的位置移动,又应该怎么弄呢
chenyang37 2015-04-03
  • 打赏
  • 举报
回复
你的getMousePosition方法是绑定在canvas的事件上的,当事件没有执行,this.mouseX就没有赋值,所以是undefined。 this.intervalID = setInterval(function(){self.enterFrame();},1000/2); 上面那一句需要再canvas事件执行完以后在执行,就没有问题了。可以写到getMousePosition方法中,计时器就不用了。
u010313216 2015-04-03
  • 打赏
  • 举报
回复
先转回原来的位置,再转回来这种转法,和我直接转这次角度和上次角度差应该是一样的效果吧,this.ctx.rotate(rotation-this.lastRotation),可是我这样写怎么不对啊?
u010313216 2015-04-03
  • 打赏
  • 举报
回复
这样啊,太感谢了。
functionsub 2015-04-03
  • 打赏
  • 举报
回复
translate(250,200); 这个就等于重新设定原点位置,所以你在clearRect的时候只能清除一部分的内容,只能清除第四相像的内容。 旋转的时候同理,重新设定了坐标系,要先旋转回原来的位置。你一直直接旋转,他就一直向上叠加角度。
functionsub 2015-04-03
  • 打赏
  • 举报
回复
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>箭头</title>
    </head>
    <body>
        <canvas width="1000" height="800" id="canvas"></canvas>
        <script>
            function Arrow(canvas){
                this.canvas = canvas;
                this.ctx = canvas.getContext("2d");
                this.x = 250;
                this.y = 200;
                this.rotation = 0;
                this.lastRotation = 0;
                Arrow.prototype.drawArrow = function(rotation){       
                    //this.ctx.clearRect(0,0,500,500);
                    this.ctx.rotate(-this.lastRotation);
                    this.ctx.rotate(rotation);
                    this.ctx.beginPath();
                    this.ctx.moveTo(-50,-25);
                    this.ctx.lineTo(0,-25);
                    this.ctx.lineTo(0,-50);
                    this.ctx.lineTo(50,0);
                    this.ctx.lineTo(0,50);
                    this.ctx.lineTo(0,25);
                    this.ctx.lineTo(-50,25);
                    this.ctx.lineTo(-50,-25);
                    this.ctx.closePath();
                    this.ctx.stroke();
                    this.lastRotation = rotation;
                }
            }
             
            function RotateToMouse(canvas){
                this.canvas = canvas;
                this.ctx = canvas.getContext("2d");
                this.arrow;
                this.ctx.translate(250,200);
                this.mouseX = 0;
                this.mouseY = 0;
                RotateToMouse.prototype.init = function(){
                    this.arrow = new Arrow(canvas);
                    this.arrow.drawArrow();
                             
                    var self = this;       
                    canvas.addEventListener("mousemove",function(e){
                    return self.getMousePosition(e);
                    });
                };
                 
                RotateToMouse.prototype.getMousePosition = function(event){
                  event = event || window.event;
                    if(event.pageX || event.pageY){
                        this.mouseX = event.pageX;
                        this.mouseY = event.pageY;
                    }else{
                        this.mouseX = event.clientX + document.body.scrollLeft - document.body.clientLeft;
                        this.mouseY = event.clientY + document.body.scrollTop - document.body.clientTop;   
                    }
                    this.arrow.rotation = Math.atan2(this.mouseY - this.arrow.y, this.mouseX - this.arrow.x);
                    this.ctx.clearRect(-750,-600,1000,800);
                    this.arrow.drawArrow(this.arrow.rotation);
                };
                this.init();
            }
            var canvas = document.getElementById('canvas');
            new RotateToMouse(canvas);
        </script>
    </body>
</html>
u010313216 2015-04-03
  • 打赏
  • 举报
回复
现在有点进步了,不过会出来几个图片,而且箭头也不指向鼠标,欸。。。

function Arrow(canvas){
this.canvas = canvas;
this.ctx = canvas.getContext("2d");
this.x = 250;
this.y = 200;
this.rotation = 0;

Arrow.prototype.drawArrow = function(){
//this.ctx.clearRect(0,0,500,500);
this.ctx.beginPath();
this.ctx.moveTo(-50,-25);
this.ctx.lineTo(0,-25);
this.ctx.lineTo(0,-50);
this.ctx.lineTo(50,0);
this.ctx.lineTo(0,50);
this.ctx.lineTo(0,25);
this.ctx.lineTo(-50,25);
this.ctx.lineTo(-50,-25);
this.ctx.stroke();
}
}

function RotateToMouse(canvas){
this.canvas = canvas;
this.ctx = canvas.getContext("2d");
this.arrow;

this.mouseX = 0;
this.mouseY = 0;

RotateToMouse.prototype.init = function(){
this.arrow = new Arrow(canvas);
this.ctx.translate(this.arrow.x,this.arrow.y);
this.arrow.drawArrow();

var self = this;
canvas.addEventListener("mousemove",function(e){
return self.getMousePosition(e);
});
};

RotateToMouse.prototype.getMousePosition = function(event){
event = event || window.event;
if(event.pageX || event.pageY){
this.mouseX = event.pageX;
this.mouseY = event.pageY;
}else{
this.mouseX = event.clientX + document.body.scrollLeft - document.body.clientLeft;
this.mouseY = event.clientY + document.body.scrollTop - document.body.clientTop;
}
this.arrow.rotation = Math.atan2(this.mouseY - this.arrow.y, this.mouseX - this.arrow.x);
this.ctx.clearRect(0,0,500,500);
this.ctx.rotate(this.arrow.rotation);
this.arrow.drawArrow();
};
this.init();
}

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧