图片未正确放置在画布上

Question

http://jsfiddle.net/YXxsH/5/

在jsfiddle上方放置图像到画布的问题是，当我将代码放置在网站中并将图像放置在最右边时，而不是在我放置图像的位置

function init() {
    var canvas = document.getElementById("graphCanvas");
    var context = canvas.getContext("2d");

    context.lineWidth = 2;
}
var pos;
function allowDrop(ev) {
    ev.preventDefault();
}
function get_pos(ev){
    pos = [ev.pageX, ev.pageY];
}
function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var offset = ev.dataTransfer.getData("text/plain").split(',');
    var data=ev.dataTransfer.getData("Text");

    var img = canvas = document.getElementById("img1");
    var dx = pos[0] - img.offsetLeft;
    var dy = pos[1] - img.offsetTop;
 document.getElementById("graphCanvas").getContext("2d").drawImage(document.getElementById(data), ev.pageX - dx, ev.pageY - dy);
}

Answer 1

您还需要考虑canvas元素的相对位置。

请参阅： http ： //jsfiddle.net/FgM48/

var img = document.getElementById("img1");
var canvas = document.getElementById("graphCanvas");
var dx = pos[0] - (img.offsetLeft - canvas.offsetLeft);
var dy = pos[1] - (img.offsetTop - canvas.offsetTop);