javascript - 在画布上绘制图像 - 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;
    }
});