在画布上绘制图像 - jQuery

Question

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

我知道我应该使用：

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

实现这一目标

Answer 1

更新了位置修正演示：http://jsfiddle.net/techfoobar/VFZ4m/2/

---

是的，你可以这样做。查看此演示：http://jsfiddle.net/techfoobar/VFZ4m/1/

请注意，您需要微调画布上绘制图像的x，y。

HTML：

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

JS：

$('#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;
    }
});