canvas是怎么响应鼠标事件的

 我来答

1个回答

#热议# 海关有哪些禁运商品？查到后怎么办？

百度网友109e958
2017-03-28 · 超过39用户采纳过TA的回答

知道小有建树答主

回答量：49

采纳率：0%

帮助的人：37.4万

我也去答题访问个人页

关注

展开全部

给你看个例子吧
一般还是调用mousedown，mouseup，mousemove事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>箭头</title>
<style>
#canvas{
display:block;
margin:50px auto;

}

</style>
</head>
<body>
<canvas id='canvas' style='height:300px; width:600px; border:1px solid #000' height='300' width='600'></canvas>
</body>
<script src='jquery-1.11.1.min.js'></script>
<script>
window.onload=function(){
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
size();
load(ctx);
}	

//实例化
function load(ctx){

var route=function(ctx,arr){
this.flag=true;
this.ctx=ctx;
this.arr=arr;

this.drawLine(arr);

}

route.prototype={
jiantou:function(x,y,p,q){

var xn1,yn1,xn2,yn2;
xn1=(x-p)*Math.cos(Math.PI/4)-(y-q)*Math.sin(Math.PI/4)+p;			
yn1=(x-p)*Math.sin(Math.PI/4)+(y-q)*Math.cos(Math.PI/4)+q;			
xn2=(x-p)*Math.cos(Math.PI*1.75)-(y-q)*Math.sin(Math.PI*1.75)+p;
yn2=(x-p)*Math.sin(Math.PI*1.75)+(y-q)*Math.cos(Math.PI*1.75)+q;

return {x1:Number(xn1),x2:Number(xn2),y1:Number(yn1),y2:Number(yn2)}

},

drawLine:function(){
var $canvas=$('#canvas');
var flag=flag;
var that=this;

$canvas.mousedown(function(e){
var e=e||window.event;
flag=true;
var a=e.offsetX;
var b=e.offsetY;
var obj={a,b};
arr[0]=obj;
ctx.beginPath();
ctx.clearRect(0,0,600,300);
ctx.closePath();

})
$canvas.mousemove(function(e){
if(flag){

var e=e||window.event;
var p=e.offsetX;
var q=e.offsetY;	
var a=arr[0].a;
var b=arr[0].b; 

//右端箭头
var x,y;
//第一象限
if(p<=a&&q<=b){
x=p+(Math.abs(p-a)/10);
y=q+(Math.abs(q-b)/10);
};
//第二象限
if(p>=a&&q<=b){
x=p-(Math.abs(p-a)/10);
y=q+(Math.abs(q-b)/10);
};
//第三象限
if(p<=a&&q>=b){
x=p+(Math.abs(p-a)/10);
y=q-(Math.abs(q-b)/10);
}
//第四象限
if(p>=a&&q>=b){
x=p-(Math.abs(p-a)/10);
y=q-(Math.abs(q-b)/10);
}
var obj=that.jiantou(x,y,p,q);
//右端箭头结束

//中部箭头开始
var xc,yc;
xc=Math.abs(p+a)/2;
yc=Math.abs(q+b)/2;

var k =(q-b)/(p-a);
//此处解决了k=0时 ktrue消失的问题，但是由于k为正数，所以，在从第一象限进入第二象限之时会存在箭头反向闪烁
// if(k==0){
// 	k=0.000001;
// 	var ktrue=(-1/k);//垂直的斜率
// }else{
// 	var ktrue=(-1/k);//垂直的斜率
// }
var ktrue=(-1/k);//垂直的斜率 当k=0时，ktrue不存在，故会消失
var bf=b-k*a;

var btrue=yc-ktrue*xc;

var xl,yl,xr,yr, xChange, yChange;

//第一象限	//第二象限
if(p<=a&&q<=b||p>=a&&q<=b){
//箭头端x值
xr=((2*xc-2*ktrue*btrue+2*ktrue*yc)-Math.sqrt( Math.pow((2*xc-2*ktrue*btrue+2*ktrue*yc),2)-(4*(Math.pow((ktrue),2)+1)*(Math.pow(xc,2)-2*btrue*yc+Math.pow(yc,2)+Math.pow(btrue,2)-600))   ))/(2*(1+Math.pow(ktrue,2)));

xl=((2*xc-2*ktrue*btrue+2*ktrue*yc)+Math.sqrt(Math.pow((2*xc-2*ktrue*btrue+2*ktrue*yc),2)-(4*(Math.pow(ktrue,2)+1)*(Math.pow(xc,2)-2*btrue*yc+Math.pow(yc,2)+Math.pow(btrue,2)-100))   ))/(2*(1+Math.pow(ktrue,2)))	;

//根据此处数值，可控制箭头的大小
xChange=((2*xc-2*ktrue*btrue+2*ktrue*yc)-Math.sqrt( Math.pow((2*xc-2*ktrue*btrue+2*ktrue*yc),2)-(4*(Math.pow((ktrue),2)+1)*(Math.pow(xc,2)-2*btrue*yc+Math.pow(yc,2)+Math.pow(btrue,2)-100))   ))/(2*(1+Math.pow(ktrue,2)));

};

//第三象限 //第四象限
if(p<=a&&q>=b||p>=a&&q>=b){
//斜率改变，改变箭头端x值
xr=((2*xc-2*ktrue*btrue+2*ktrue*yc)+Math.sqrt( Math.pow((2*xc-2*ktrue*btrue+2*ktrue*yc),2)-(4*(Math.pow((ktrue),2)+1)*(Math.pow(xc,2)-2*btrue*yc+Math.pow(yc,2)+Math.pow(btrue,2)-600))   ))/(2*(1+Math.pow(ktrue,2)));

xl=((2*xc-2*ktrue*btrue+2*ktrue*yc)-Math.sqrt(Math.pow((2*xc-2*ktrue*btrue+2*ktrue*yc),2)-(4*(Math.pow(ktrue,2)+1)*(Math.pow(xc,2)-2*btrue*yc+Math.pow(yc,2)+Math.pow(btrue,2)-100))   ))/(2*(1+Math.pow(ktrue,2)));

//根据此处数值，可控制箭头的大小
xChange=((2*xc-2*ktrue*btrue+2*ktrue*yc)+Math.sqrt( Math.pow((2*xc-2*ktrue*btrue+2*ktrue*yc),2)-(4*(Math.pow((ktrue),2)+1)*(Math.pow(xc,2)-2*btrue*yc+Math.pow(yc,2)+Math.pow(btrue,2)-100))   ))/(2*(1+Math.pow(ktrue,2)));
}

yl=ktrue*xl+btrue;
yr=ktrue*xr+btrue;
yChange=ktrue*xChange+btrue;

var objCenter=that.jiantou(xChange,yChange,xr,yr);

//中部箭头结束 

ctx.beginPath();
ctx.clearRect(0,0,600,300);	
ctx.moveTo(arr[0].a,arr[0].b);
ctx.lineTo(p,q);	

ctx.moveTo(obj.x1,obj.y1);
ctx.lineTo(p,q);
ctx.lineTo(obj.x2,obj.y2);	
ctx.lineStyle=2;
ctx.strokeStyle='#f00';
ctx.stroke();	

ctx.beginPath();
ctx.moveTo(xl,yl);
ctx.lineTo(xr,yr);
ctx.moveTo(objCenter.x1,objCenter.y1);
ctx.lineTo(xr,yr);
ctx.lineTo(objCenter.x2,objCenter.y2);	
ctx.lineStyle=2;
ctx.strokeStyle='#f00';
ctx.stroke();
ctx.closePath();

}else{
return
}

});

$canvas.mouseup(function(e){
flag=false;

})
}
}
// 实例化

var ctx =ctx;
var arr=new Array();
var route=new route(ctx,arr);

}

//  适应屏幕
function size(){
window.onresize = null;
var bodyHeight= document.body.clientHeight;
var clientHeight= document.documentElement.scrollHeight;
}

</script>
</html>


本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

淘宝，您的全能购物天堂

海量商品尽收眼底，只有你想不到的，没有淘宝找不到的。加入百万用户的行列，让淘宝为您打开一片全新购物天地。

simba.taobao.com广告

淘宝:您的鼠标问题终结者

定制解决方案，鼠标使用无忧。发现淘宝，发现您的鼠标新世界。

simba.taobao.com广告

淘宝——探索未知的宝藏，惊喜无处不在

在浩瀚的商品海洋里，总有未曾发现的新大陆。每一处逛淘宝都是冒险，每一件商品都是故事。

simba.taobao.com广告

canvas是怎么响应鼠标事件的

您可能关注的内容

其他类似问题

为你推荐：