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

Question

我想移动我用画布绘制的形状；例如：我画矩形。如何使用可拖动属性将其移动到特定区域？还使用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>

Answer 1

HTML5 画布基础知识

首先，让我们讨论一下 HTML5 Canvas 的工作方式。就像带有快干油画颜料的真实画布一样，当您将stroke() 或fill() 或drawImage() 放到画布上时，颜料就会成为画布的一部分。尽管您画了一个“矩形”并看到它，但矩形的像素完全取代了背景（或者在矩形边缘的抗锯齿的情况下，与它们混合并永远改变它们）。如果你让莫奈把画中的一个人“移动”到右边一点，他会怎么说？不能移动矩形，不能拖动矩形，不能擦除矩形，不能检测到鼠标悬停在矩形上……因为没有矩形，所以有只是一个二维像素数组。

HTML5 画布上的“拖动”

您可以做（必须做的）是自己跟踪鼠标移动，在您“拖动”它时在不同位置使用矩形清除和重绘画布。

Answer 2

您是否正在尝试做这样的事情？

http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/