87,910
社区成员
发帖
与我相关
我的任务
分享
var mouse = catchMouse(canvas);
canvas.addEventListener('mousemove',function(){
console.log(mouse.x,mouse.y);
});
这样就行了,只需要为canvas加一个监听事件,drawFrame里的console可以去掉。
[/quote]哥们,谢了,我昨天也是这样解决的,刚开始以为是鼠标获取出错,后来才发现是触发机制有问题
var mouse = catchMouse(canvas);
canvas.addEventListener('mousemove',function(){
console.log(mouse.x,mouse.y);
});
这样就行了,只需要为canvas加一个监听事件,drawFrame里的console可以去掉。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跟踪箭头</title>
</head>
<style>
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 16px;
}
h1{
width: 100%;
text-align: center;
line-height: 1.5;
}
#canvas{
position: absolute;
margin-left: -500px;
left: 50%;
top: 50px;
border: 1px solid gray;
}
</style>
<body>
<h1>Big-Brothers<p id="txt"></p></h1>
<canvas id="canvas" width="1000px" height="600px"></canvas>
<p id="txt1"></p>
<p id="txt2"></p>
<p id="txt3"></p>
</body>
<script>
var body=document.getElementsByTagName("body"),
canvas=document.getElementById("canvas"),
ctx=canvas.getContext("2d");
var Arrow=function(){
this.x=0;
this.y=0;
this.color="gray";
this.rotation=0;
}
Arrow.prototype.drawArrow=function(ctx){
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.rotation);
ctx.beginPath();
ctx.fillStyle=this.color;
ctx.lineWidth=2;
ctx.moveTo(50,50);
ctx.lineTo(100,50);
ctx.lineTo(100,25);
ctx.lineTo(150,75);
ctx.lineTo(100,125);
ctx.lineTo(100,100);
ctx.lineTo(50,100);
ctx.lineTo(50,50);
ctx.closePath();
ctx.fill();//填充
ctx.stroke();//画线
ctx.restore();
}
// arrow.drawArrow(ctx);
//鼠标捕捉函数,el代表的区域,在哪个区域对鼠标进行捕捉
//var Mouse=function(){
// this.x=0;
// this.y=0;
//}
var mouse={
x:0,y:0
}
var catchMouse=function(el){
el.addEventListener('mousemove',function(event){
var x,y;
//浏览器检测
if(event.pageX||event.pageY){
x=event.pageX;
y=event.pageY;
}else{
//获取鼠标到窗口边缘的位置
x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
y=event.clientY+document.body.scrollTop+document.documentElement.scrollTop;
}
document.getElementById("txt1").innerHTML=x+":"+y;
//获取el元素边框到窗口边缘的位置,鼠标位置减去el位置,就为鼠标到el边缘的位置
x=x-el.offsetLeft;
y=y-el.offsetTop;
document.getElementById("txt2").innerHTML=el.offsetLeft+":"+el.offsetTop;
mouse.x=x;
mouse.y=y;
document.getElementById("txt").innerHTML=mouse.x+":"+mouse.y;
},false);
}
//当鼠标进入canvas区域之后,就对鼠标位置进行捕捉
//canvas.addEventListener('mousemove',function(){
// document.getElementById("txt").innerHTML=mouse.x+":"+mouse.y;
//})
//动画绘制
//建立一个arrow对象
var arrow=new Arrow();
arrow.x=canvas.width/2;
arrow.y=canvas.height/2;
catchMouse(canvas);
//var mouse=new Mouse();
//alert(mouse.x+":"+mouse.y);
(function drawFrame(){
//浏览器检测
/*if(!window.requestAnimationFrame){
window.requestAnimationFrame=(window.mozRequestAnimationFrame()||window.webkitRequestAnimationFrame
||window.oRequestAnimationFrame||window.msRequestAnimationFrame
||function(callback){
return window.setTimeout(callback,1000/60);
})
}*/
window.requestAnimationFrame(drawFrame);//自身调用
ctx.clearRect(0,0,canvas.width,canvas.height);
// alert(mouse.x+":"+mouse.y);
var dx=mouse.x-arrow.x,
dy=mouse.y-arrow.y;
// alert(mouse.x+":"+mouse.y)
arrow.ratation=Math.atan2(dy,dx);
document.getElementById("txt3").innerHTML=mouse.x+":"+mouse.y;
arrow.drawArrow(ctx);
}());
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跟踪箭头</title>
</head>
<style>
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 16px;
}
h1{
width: 100%;
text-align: center;
line-height: 1.5;
}
#canvas{
position: absolute;
margin-left: -500px;
left: 50%;
top: 50px;
border: 1px solid gray;
}
</style>
<body>
<h1>Big-Brothers<p id="txt"></p></h1>
<canvas id="canvas" width="1000px" height="600px"></canvas>
<p id="txt1"></p>
<p id="txt2"></p>
<p id="txt3"></p>
</body>
<script>
var body=document.getElementsByTagName("body"),
canvas=document.getElementById("canvas"),
ctx=canvas.getContext("2d");
var Arrow=function(){
this.x=0;
this.y=0;
this.color="gray";
this.rotation=0;
}
Arrow.prototype.drawArrow=function(ctx){
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.rotation);
ctx.beginPath();
ctx.fillStyle=this.color;
ctx.lineWidth=2;
ctx.moveTo(50,50);
ctx.lineTo(100,50);
ctx.lineTo(100,25);
ctx.lineTo(150,75);
ctx.lineTo(100,125);
ctx.lineTo(100,100);
ctx.lineTo(50,100);
ctx.lineTo(50,50);
ctx.closePath();
ctx.fill();//填充
ctx.stroke();//画线
ctx.restore();
}
// arrow.drawArrow(ctx);
//鼠标捕捉函数,el代表的区域,在哪个区域对鼠标进行捕捉
//var Mouse=function(){
// this.x=0;
// this.y=0;
//}
var catchMouse=function(el){
var mouse={
x:0,y:0
}
//浏览器检测
el.addEventListener('mousemove',function(event){
var x,y;
//浏览器检测
if(event.pageX||event.pageY){
x=event.pageX;
y=event.pageY;
}else{
//获取鼠标到窗口边缘的位置
x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
y=event.clientY+document.body.scrollTop+document.documentElement.scrollTop;
}
document.getElementById("txt1").innerHTML=x+":"+y;
//获取el元素边框到窗口边缘的位置,鼠标位置减去el位置,就为鼠标到el边缘的位置
x=x-el.offsetLeft;
y=y-el.offsetTop;
document.getElementById("txt2").innerHTML=el.offsetLeft+":"+el.offsetTop;
mouse.x=x;
mouse.y=y;
document.getElementById("txt").innerHTML=mouse.x+":"+mouse.y;
},false);
return mouse;
}
//当鼠标进入canvas区域之后,就对鼠标位置进行捕捉
//canvas.addEventListener('mousemove',function(){
// document.getElementById("txt").innerHTML=mouse.x+":"+mouse.y;
//})
//动画绘制
//建立一个arrow对象
var arrow=new Arrow();
arrow.x=canvas.width/2;
arrow.y=canvas.height/2;
//var mouse=new Mouse();
//alert(mouse.x+":"+mouse.y);
(function drawFrame(){
//浏览器检测
/*if(!window.requestAnimationFrame){
window.requestAnimationFrame=(window.mozRequestAnimationFrame()||window.webkitRequestAnimationFrame
||window.oRequestAnimationFrame||window.msRequestAnimationFrame
||function(callback){
return window.setTimeout(callback,1000/60);
})
}*/
window.requestAnimationFrame=(drawFrame,canvas);//自身调用
ctx.clearRect(0,0,canvas.width,canvas.height);
mouse=catchMouse(canvas);
alert(mouse.x+":"+mouse.y);
var dx=mouse.x-arrow.x,
dy=mouse.y-arrow.y;
alert(mouse.x+":"+mouse.y)
arrow.ratation=Math.atan2(dy,dx);
document.getElementById("txt3").innerHTML=mouse.x+":"+mouse.y;
arrow.drawArrow(ctx);
}());
</script>
</html>