87,904
社区成员
发帖
与我相关
我的任务
分享js+canvas动画问题
第一张图里面我建立了一个catchMouse，然后mouse=catchMouse(canvas)捕捉鼠标在canvas里的位置信息，返回mouse.x和mouse.y信息，但是后面在后面调用的时候mouse.x和mouse.y始终为0，并没有被改变，这是为什么？哪位大大帮忙解释解释？
...全文
请发表友善的回复…
发表回复
一只特立独行的doge 2016-11-20
- 打赏
- 举报
看了一下源码，发现不用做很多改动：
var mouse = catchMouse(canvas);
canvas.addEventListener('mousemove',function(){
console.log(mouse.x,mouse.y);
});
bhbhxy 2016-11-18
- 打赏
- 举报
看了一下源码，发现不用做很多改动：
var mouse = catchMouse(canvas);
canvas.addEventListener('mousemove',function(){
console.log(mouse.x,mouse.y);
});
一只特立独行的doge 2016-11-18
- 打赏
- 举报
谢谢，解决了
天际的海浪 2016-11-18
- 打赏
- 举报
<!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>
一只特立独行的doge 2016-11-18
- 打赏
- 举报
我上传了源码，哥们，如果可以的话复制帮我看看吧，放进去之后mouse.x和mouse.y的值alert出来还是0
一只特立独行的doge 2016-11-18
- 打赏
- 举报
我上传了源码，复制就能在浏览器打开，我想实现的是在canvas范围之内箭头会跟随鼠标的方向转动，楼里的几种方式我试过，我也把mouse改成了对象，不过，在drawFrame（）里面的mouse.x和mouse.y始终alert出来是0，就是初始赋的值
一只特立独行的doge 2016-11-18
- 打赏
- 举报
<!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>
天际的海浪 2016-11-18
- 打赏
- 举报
window.requestAnimationFrame(drawframe);
bhbhxy 2016-11-18
- 打赏
- 举报
catchMouse的返回值只返回一次，而代码就运行了一次，结果肯定是0,0，
放到requestAnimationFrame里就能每次都返回了。
bhbhxy 2016-11-18
- 打赏
- 举报
你要放到drawFrame里才能显示出来。
一只特立独行的doge 2016-11-18
- 打赏
- 举报
还是一样的问题，alert出来的始终是0:0
天际的海浪 2016-11-18
- 打赏
- 举报
mouse改成全局变量
