0

ドロップ可能な画像をキャンバスに描画するにはどうすればよいですか。

私は使用する必要があることを知っています:

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を使用してこれを達成できますか

4

1 に答える 1

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;
    }
});
于 2012-09-14T13:00:29.497 に答える