Javascript 如何仅使用HTML5功能移动画布？

我想移动我用画布画的形状；例如：我画矩形。如何使用可拖动属性将其移动到特定区域？还使用Javascript如何添加侦听器

等待帮助

这是我的代码：

在Javascript文件中：

var c=document.getElementById("rectangle");
var cxt=c.getContext("2d");
cxt.fillStyle="#009933";
cxt.fillRect(20,10
,150,75);


function dragStart(ev) {
//allow move
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.dropEffect='move';

//on transfer
var style = ev.target.getAttribute("id").style;
ev.dataTransfer.setData("Text",ev.target.getAttribute("id"));
//ev.dataTransfer.setDragImage(ev.target,0,0);
ev.dataTransfer.setDragImage(ev.target,(parseInt(style.getPropertyValue("left"),10) - ev.clientX) ,(parseInt(style.getPropertyValue("top"),10) - ev.clientY));
return true;
}
function dragEnter(ev) {

return true;
}
function dragOver(event) {
event.preventDefault();
return false;
}
function dragDrop(ev) {
//var offset = event.dataTransfer.getData("text/plain").split(',');
   var dm = document.getElementById(ev.dataTransfer.getData("Text"));
   // dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
   // dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
 ev.target.appendChild(dm); 
 ev.stopPropagation();  
ev.preventDefault();
    return false;

}

HTML文件：

<div  ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">
<canvas id="rectangle" width="200px" height="150px" draggable="true"></canvas>
</div>

<div id="target"ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">

</div>

---

你想做这样的事情吗

HTML5画布基础 首先，让我们讨论HTML5画布的工作方式。就像真实世界的画布上有快干的油画一样，当你

stroke（）

或

fill（）

或

drawImage（）

到画布上时，油画就会成为画布的一部分。虽然您绘制了一个“矩形”并将其视为一个“矩形”，但矩形的像素完全替换了背景（或者在矩形边缘进行抗锯齿处理的情况下，与它们混合并永久更改）。如果你让莫奈把画中的一个人“移”到右边一点，他会怎么说？你不能移动矩形，不能拖动矩形，不能擦除矩形，不能在矩形上检测鼠标…因为没有矩形，只有一个二维像素阵列

HTML5画布上的“拖动”

---

你能做的（必须做的）是自己跟踪鼠标移动，在“拖动”画布时，清除并在不同的位置用矩形重新绘制画布。

到目前为止你得到了什么代码？我可以在firefox中将画布移动到特定区域，但不能移动到该区域的特定位置。我还可以把它移回原来的位置。使用javascript。这将通过firefox完成，但chrome将在移动过程中显示画布背景的突出显示。感谢您的重播。发布您正在处理的代码的相关部分。您可能误解了HTML5画布对象允许的内容。一旦你在上面画了一个矩形，这个矩形就变成了画布上的静态图像数据，而不是你可以引用的一个单独的对象。你必须做一些事情，跟踪mousedown和mouseup事件，并根据鼠标光标位置不断地重新绘制矩形，以模拟“拖动”效果。我知道。。。但我只想使用HTML5。但是拖动元素的问题。。。它不会拖动到鼠标位置。从代码中可以看出，您拖动的是整个画布，而不是画布中的矩形-是否正确？您想将画布从一个div移动到另一个div还是在画布中移动形状？该教程仅在Firefox中适用于我，它在其他div之间拖动div，而不是画布对象。您可能想看看这个：我不想使用Javascript libaray。。。只有HTML5。。。好吧，让我们假设我想移动罐子，那么它的正确位置呢？？？我使用鼠标拖动，将图像设置到画布上…所以这是工作。。但是为每个位置绘制图像。。。这将是一个缓慢的过程。@Javalover你低估了计算机的速度。这是一个演示，还有另一个。（速度取决于您的计算机。）