在html5中，javascript有没有办法制作一个多边形，我只是绘制可拖动的？ 还是听老鼠活动？

所以我用以下代码绘制一个多边形：

var canvas = document.getElementById("polyCanvas"); var c2 = canvas.getContext("2d"); var coords = ''; c2.clearRect(0, 0, 2000, 2000); $("fdel").remove(); $("#eliminar" + todelete).remove(); c2.beginPath(); var first = true; var points = 1; var done = false; $("#vertexcontainer .vertex").each(function() { var position = $(this).position(); var x = 2+position.left; var y = 2+position.top; if (!done){ if (first) { c2.moveTo(x, y); first = false; } else { c2.lineTo(x, y); } } if(points > cpoints){ done = true; } points = points + 1; coords = coords + x + ',' + y + ' '; }); $('#coordinates').val(coords);; c2.closePath(); c2.lineWidth = 2; c2.strokeStyle = '#ff0000'; c2.stroke(); c2.fillStyle = "rgb(0, 100, 200)"; c2.fill(); 

它运行平稳，但我希望能够拖动多边形，或使用鼠标事件。 那可能吗？

我天真地尝试做c2.hover（函数……，和c2.addeventlistener ……）没有成功=（

Answer 1

您实际上无法移动您在canvas上制作的任何绘图。

但是…… 你可以创造一些东西在移动的错觉 。

通过反复擦除canvas并在新位置重新绘制形状，可以创建运动的幻觉。

要拖动形状，您需要收听4个鼠标事件。

在mousedown中：检查鼠标是否在形状上，如果是，则设置一个标志，指示拖动已经开始。 要检查鼠标是否在形状上，可以使用canvas上下文的isPointInPath方法来测试[x，y]点是否在最近绘制的路径中。

在mousemove中：如果设置了拖动标记（表示正在进行拖动），请将所选文本的位置更改为用户拖动的距离，并将形状重新绘制到新位置

在mouseup或mouseout中：拖动结束，拖动标记清晰。

这是一个示例代码和一个演示：

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; function reOffset(){ var BB=canvas.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; } var offsetX,offsetY; reOffset(); window.onscroll=function(e){ reOffset(); } window.onresize=function(e){ reOffset(); } var isDown=false; var startX,startY; var poly={ x:0, y:0, points:[{x:50,y:50},{x:75,y:25},{x:100,y:50},{x:75,y:125},{x:50,y:50}], } ctx.fillStyle='skyblue'; ctx.strokeStyle='gray'; ctx.lineWidth=3; draw(); $("#canvas").mousedown(function(e){handleMouseDown(e);}); $("#canvas").mousemove(function(e){handleMouseMove(e);}); $("#canvas").mouseup(function(e){handleMouseUp(e);}); $("#canvas").mouseout(function(e){handleMouseOut(e);}); function draw(){ ctx.clearRect(0,0,cw,ch); define(); ctx.fill(); ctx.stroke() } function define(){ ctx.beginPath(); ctx.moveTo(poly.points[0].x+poly.x,poly.points[0].y+poly.y); for(var i=0;i 

 body{ background-color: ivory; } #canvas{border:1px solid red; } 

  
Drag the polygon