html检查鼠标是否按住,javascript – 检测鼠标是否在画布内的对象上

演示：

http://jsfiddle.net/m1erickson/Cw4ZN/

您需要这些概念来检查鼠标是否在一行内：

>定义起点&一条线的终点

>听取鼠标事件

>在鼠标移动时,检查鼠标是否在该行的指定距离内

这是一个带注释的示例代码供您学习.

body{ background-color: ivory; }

canvas{border:1px solid red;}

$(function(){

// canvas related variables

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var $canvas=$("#canvas");

var canvasOffset=$canvas.offset();

var offsetX=canvasOffset.left;

var offsetY=canvasOffset.top;

// dom element to indicate if mouse is inside/outside line

var $hit=$("#hit");

// determine how close the mouse must be to the line

// for the mouse to be inside the line

var tolerance=5;

// define the starting & ending points of the line

var line={x0:50,y0:50,x1:100,y1:100};

// set the fillstyle of the canvas

ctx.fillStyle="red";

// draw the line for the first time

draw(line);

// function to draw the line

// and optionally draw a dot when the mouse is inside

function draw(line,mouseX,mouseY,lineX,lineY){

ctx.clearRect(0,0,canvas.width,canvas.height);

ctx.beginPath();

ctx.moveTo(line.x0,line.y0);

ctx.lineTo(line.x1,line.y1);

ctx.stroke();

if(mouseX && lineX){

ctx.beginPath();

ctx.arc(lineX,lineY,tolerance,0,Math.PI*2);

ctx.closePath();

ctx.fill();

}

}

// calculate the point on the line that's

// nearest to the mouse position

function linepointNearestMouse(line,x,y) {

//

lerp=function(a,b,x){ return(a+x*(b-a)); };

var dx=line.x1-line.x0;

var dy=line.y1-line.y0;

var t=((x-line.x0)*dx+(y-line.y0)*dy)/(dx*dx+dy*dy);

var lineX=lerp(line.x0, line.x1, t);

var lineY=lerp(line.y0, line.y1, t);

return({x:lineX,y:lineY});

};

// handle mousemove events

// calculate how close the mouse is to the line

// if that distance is less than tolerance then

// display a dot on the line

function handleMousemove(e){

e.preventDefault();

e.stopPropagation();

mouseX=parseInt(e.clientX-offsetX);

mouseY=parseInt(e.clientY-offsetY);

if(mouseXline.x1){

$hit.text("Outside");

draw(line);

return;

}

var linepoint=linepointNearestMouse(line,mouseX,mouseY);

var dx=mouseX-linepoint.x;

var dy=mouseY-linepoint.y;

var distance=Math.abs(Math.sqrt(dx*dx+dy*dy));

if(distance

$hit.text("Inside the line");

draw(line,mouseX,mouseY,linepoint.x,linepoint.y);

}else{

$hit.text("Outside");

draw(line);

}

}

// tell the browser to call handleMousedown

// whenever the mouse moves

$("#canvas").mousemove(function(e){handleMousemove(e);});

}); // end $(function(){});

Move mouse near line

关于命中测试路径：

如果使用路径命令创建路径,则可以使用context.isPointInPath(mouseX,mouseY)检查鼠标是否在路径中. context.isPointInPath不适用于行但是因为行理论上具有零宽度来“击中”.