html js坐标图,javascript – HTML5 Canvas沿着带坐标的路径拖动图像

演示：

http://jsfiddle.net/m1erickson/7vmML/

示例代码：

body{ background-color: ivory; }

#canvas{border:1px solid red;}

$(function(){

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;

var scrollX=$canvas.scrollLeft();

var scrollY=$canvas.scrollTop();

var isDown=false;

var startX;

var startY;

var points=[];

points.push({x:10,y:10});

points.push({x:75,y:100});

points.push({x:150,y:125});

points.push({x:125,y:200});

var imageX=-200;

var imageY=-200;

var img=new Image();

img.οnlοad=start;

img.crossOrigin="anonymous";

img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png";

function start(){

drawAll();

}

function drawAll(){

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

ctx.beginPath();

ctx.moveTo(points[0].x+4,points[0].y+4)

for(var i=1;i

var pt=points[i];

ctx.lineTo(pt.x+4,pt.y+4);

}

ctx.stroke();

//

for(var i=0;i

var pt=points[i];

ctx.fillRect(pt.x,pt.y,8,8);

}

//

ctx.drawImage(img,imageX,imageY);

}

function handleMouseDown(e){

e.preventDefault();

isDown=true;

}

function handleMouseUp(e){

e.preventDefault();

isDown=false;

}

function handleMouseOut(e){

e.preventDefault();

isDown=false;

}

function handleMouseMove(e){

if(!isDown){return;}

e.preventDefault();

mouseX=parseInt(e.clientX-offsetX);

mouseY=parseInt(e.clientY-offsetY);

var minDistance=1000;

var minPoint=-1;

for(var i=0;i

var pt=points[i];

var dx=mouseX-pt.x;

var dy=mouseY-pt.y;

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

if(distance

minDistance=distance;

imageX=pt.x-img.width/2;

imageY=pt.y-img.height/2;

}

}

drawAll();

}

$("#canvas").mousedown(function(e){handleMouseDown(e);});

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

$("#canvas").mouseup(function(e){handleMouseUp(e);});

$("#canvas").mouseout(function(e){handleMouseOut(e);});

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

Drag mouse. Image will snap to nearest point.

请注意,此示例代码使用jQuery来侦听鼠标事件.如果您更喜欢纯JavaScript,则可以使用这些事件绑定：

canvas.οnmοusedοwn=handleMouseDown;

canvas.οnmοuseup=handleMouseUp;

canvas.οnmοuseοut=handleMouseOut;

canvas.οnmοusemοve=handleMouseMove;

你可以像这样计算鼠标位置：

function getMousePos(canvas,e) {

var rect=canvas.getBoundingClientRect();

return{ x:e.clientX-rect.left, y:e.clientY-rect.top };

}