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

Posted 2023-05-08

【中文标题】如何仅使用 HTML5 功能使画布移动？

【英文标题】：How to make canvas move with HTML5 feature only?

【发布时间】：2012-01-11 22:56:58

【问题描述】：

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

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

</div>

【问题讨论】：

到目前为止你得到了什么代码？

我可以将Firefox中的画布移动到特定区域，但不能移动到该区域的特定位置。我也可以将它移回原位。使用 JavaScript。这将使用 Firefox 完成，但 chrome 会在移动过程中显示画布背景的高光。感谢您的重播。

发布您正在处理的代码的相关部分。

【参考方案1】：

HTML5 画布基础知识

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

HTML5 画布上的“拖动”

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

【讨论】：

我使用拖动并将图像设置到画布......所以它是工作......但是为每个位置绘制图像......这将是一个缓慢的过程......

@Javalover 你低估了计算机的速度。这是20 small images being redrawn at over 200fps 和另一个much larger image being redrawn at over 150fps 的演示。 （速度取决于您的计算机。）

【参考方案2】：

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

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

【讨论】：

您可能误解了 HTML 5 画布对象允许的内容。一旦您在其上绘制了一个矩形 - 该矩形将成为画布上的静态图像数据，而不是您可以引用的单独对象。您必须做一些事情来跟踪 mousedown 和 mouseup 事件并根据鼠标光标位置不断重新绘制矩形以伪造“拖动”效果。

我知道……但我只想使用 HTML5。但是拖动元素的问题......它不会拖动到鼠标位置。

从您的代码中，您似乎正在拖动整个画布，而不是画布中的矩形形状 - 对吗？您想将画布从一个 div 移动到另一个 div 还是在画布内移动一个形状？

该教程仅在 Firefox 中对我有用，它在其他 div 之间拖动 div - 而不是画布对象。你可能想看看这个：html5canvastutorials.com/advanced/…

我不想使用 Javascript libaray ...只有 HTML5 ...好吧，可以说我想移动 canves 它的正确位置如何？鼠标在哪里