如何仅使用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 Canvas基础知识

首先，让我们讨论HTML5 Canvas的工作方式。就像现实世界中带有快干油漆的画布一样，当您将stroke()或fill()或drawImage()涂在画布上时，油漆将成为画布的一部分。尽管您绘制了一个“矩形”并按原样看到它，但是矩形的像素完全替换了背景（或者在矩形边缘进行抗锯齿的情况下，与它们混合并永久更改了它们）。如果您要求他将画中的一个人“移动”到右边一点，莫奈会怎么说？您不能移动矩形，不能拖动矩形，不能擦除矩形，不能检测到矩形的鼠标悬停…因为没有矩形，只有一个2D像素阵列。

“在HTML5画布上拖动”

你能做什么（必须做）是跟踪鼠标移动自己，清除并重绘在不同地点的矩形画布，你“拖”吧。

Answer 2

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

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