Javascript 如何将图像和文本拖动到画布

我几乎完成了jQuery可拖动和可拖放的生成器图像，但是html2canvas没有下载css过滤器

我从头开始，我很难理解如何使用html5画布将图像拖动到drop中。 我还想输入显示在画布上的文本，然后可以拖动并更改其属性（字体、大小、颜色）

当然，我需要了解如何在每个拖动对象上应用过滤器

---

感谢您在支持浏览器方面提供的帮助

，您不能将元素附加到画布元素中。将其视为img元素。你必须利用它。看看我的答案@我认为Kaido有可能看到很多像和这样的例子。我认为html5画布是一个图像编辑器，但您提供的每个示例都是在画布上绘制的。它不仅仅是一个附加的HTML元素。演示如何使用jqueryUI拖动img元素并将其“拖放”到画布上（drop==在画布上绘制相同的图像）。并演示如何将文本元素拖动到画布。您可以在Stackoverflow中搜索显示如何在画布上“拖动”图像和文本的其他示例（drag==清除画布并在其新位置重新绘制项目）。在支持浏览器的情况下，您不能将元素附加到画布元素中。将其视为img元素。你必须利用它。看看我的答案@我认为Kaido有可能看到很多像和这样的例子。我认为html5画布是一个图像编辑器，但您提供的每个示例都是在画布上绘制的。它不仅仅是一个附加的HTML元素。演示如何使用jqueryUI拖动img元素并将其“拖放”到画布上（drop==在画布上绘制相同的图像）。并演示如何将文本元素拖动到画布。您可以在Stackoverflow中搜索显示如何在画布周围“拖动”图像和文本的其他示例（拖动==清除画布并在其新位置重新绘制项目）。

 var canvas = document.getElementById("DropHere");
var ctx = canvas.getContext("2d");

ctx.font = "100px arial";
ctx.strokeText("Test", 50, 100);

function allowDrop(ev) {
ev.preventDefault(); 
} 

function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.class); 
} 

function drop(ev) {
var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementByClass(data)); ev.preventDefault();

}