Javascript 在画布上绘制图像-jQuery

如何将可拖放图像绘制到画布中

我知道我应该使用：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("image");
ctx.drawImage(img,//drop x position ,//drop y position);

---

我可以使用jquery来实现这一点吗？

带位置校正的更新演示：

---

是的，你能做到。查看此演示：

注意，在画布上绘制图像时，需要微调x，y

HTML:

---

你说的可删除是什么意思？你为什么要这样做？如果没有繁重的库，画布性能很难保持。我建议你坚持你目前的方法，不要再试图把它包装起来（除了让你的代码变慢之外，这没有任何意义）谢谢你的回答，但是当你放下图像时，它应该淹没在与放下图像相同的位置上。我可以这样做吗？我已经在小提琴上添加了一些位置校正逻辑。检查更新的演示。

<img id="x" src="image.png">
<canvas id="c" width="200" height="200">

$('#x').draggable();
$('#c').droppable({
    drop: function(event, ui) {
        var img = ui.draggable;
        var ctxt =$("#c")[0].getContext("2d");
        var offs = $("#c").offset();
        ctxt.drawImage(img[0], event.pageX - offs.left, event.pageY - offs.top);
        return false;
    }
});