Javascript 在画布上放置元素

我有一个在HTML中运行的拖放功能

我还做了一张帆布

我将HTML5拖放的代码添加到画布所在的代码中。但是，图像不会出现在画布上

谁能告诉我应该更换什么，以便它正确地显示在画布上

我尝试更改函数placemap和placeback的ID以匹配画布的ID，但没有成功

谢谢

<h2>Place your hero on the map</h2>


<canvas width=1200 height=350 id='map_id'>
</canvas>

<script>

// setup
var canvas = document.getElementById('map_id');
var context = canvas.getContext('2d');

var hmap = Math.min(0.9 * screen.height, 0.45 * screen.width);
var numHeroes = 101;
var rows = Math.ceil(Math.sqrt(numHeroes))+5;
var hsize = Math.floor((1.0 / rows) * hmap);

function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    document.getElementById(data).style.left = ev.clientX + document.body.scrollLeft - 0.5 * parseInt(document.getElementById(data).style.height) + "px";
    document.getElementById(data).style.top = ev.clientY + document.body.scrollTop - 0.5 * parseInt(document.getElementById(data).style.height) + "px";
}

function placeMap()
{
    var map = document.getElementById("map");
    map.style.left = "0px";
    map.style.top = "0px";
    map.style.height = hmap + "px";
    map.style.width = hmap + "px";
}

function placeBack()
{
    var map = document.getElementById("back");
    map.style.left = hmap + "px";
    map.style.top = "0px";
    map.style.height = hmap + "px";
    map.style.width = hmap + "px";
}

function place(id, num)
{
    var img = document.getElementById(id);
    img.style.left = hmap + hsize * (num % rows) + "px";
    img.style.top = hsize * Math.floor(num / rows) + "px";
    img.style.height = hsize + "px";
    img.style.width = hsize + "px";
}

function placeWard(id, num)
{
    var img = document.getElementById(id);
    img.style.left = hmap + (1+(num % 2)) * 0.5 * hsize + "px";
    img.style.top = 7.5 * hsize + Math.floor(num / 2) * 0.5 * hsize + "px";
    img.style.height = 0.5*hsize + "px";
    img.style.width = 0.5*hsize + "px";
}

</script>


<!-- draw a horizontal line -->

<hr>

</body>
</html>

将你的英雄放在地图上
//设置
var canvas=document.getElementById（'map_id'）；
var context=canvas.getContext（'2d'）；
var hmap=Math.min（0.9*screen.height，0.45*screen.width）；
var numheros=101；
var rows=Math.ceil（Math.sqrt（numheros））+5；
var hsize=数学楼层（（1.0/行）*hmap）；
功能allowDrop（ev）
{
ev.preventDefault（）；
}
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
document.getElementById（数据）.style.left=ev.clientX+document.body.scrollLeft-0.5*parseInt（document.getElementById（数据）.style.height）+“px”；
document.getElementById（数据）.style.top=ev.clientY+document.body.scrollTop-0.5*parseInt（document.getElementById（数据）.style.height）+“px”；
}
函数placeMap（）
{
var map=document.getElementById（“map”）；
map.style.left=“0px”；
map.style.top=“0px”；
map.style.height=hmap+“px”；
map.style.width=hmap+“px”；
}
函数placeBack（）
{
var map=document.getElementById（“返回”）；
map.style.left=hmap+“px”；
map.style.top=“0px”；
map.style.height=hmap+“px”；
map.style.width=hmap+“px”；
}
功能位置（id，num）
{
var img=document.getElementById（id）；
img.style.left=hmap+hsize*（行数百分比）+“px”；
img.style.top=hsize*Math.floor（num/行）+“px”；
img.style.height=hsize+“px”；
img.style.width=hsize+“px”；
}
函数placeWard（id，num）
{
var img=document.getElementById（id）；
img.style.left=hmap+（1+（num%2））*0.5*hsize+“px”；
img.style.top=7.5*hsize+Math.floor（num/2）*0.5*hsize+px；
img.style.height=0.5*hsize+px；
img.style.width=0.5*hsize+“px”；
}

您是否愿意使用jQueryUI

draggable

而不是html

ondrag

如果是，下面是示例代码和演示：

//console.log（“dragmove:+e.clientX+”/“+e.clientY”）； }

    function dragmove(e){

    function dragend(e,ui){
      // relative to document
      var dragX=ui.offset.left;
      var dragY=ui.offset.top;
      // top-left of dropped element is at canvasXY
      var canvasX=dragX-offsetX;
      var canvasY=dragY-offsetY
    }

    function dragDrop(e,ui){
        var element=ui.draggable;
        var data=element.data("url");
        var x=parseInt(ui.offset.left-offsetX);
        var y=parseInt(ui.offset.top-offsetY);
        ctx.drawImage(element.data("image"),x-1,y);            
    }

}); // end $(function(){});
</script>

</head>

<body>
    <img id="house" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png"><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html> 

函数dragend（e，ui）{
//相对于文档
var dragX=ui.offset.left；
var dragY=ui.offset.top；
//被删除元素的左上角位于画布XY
var canvasX=dragX offsetX；
var canvasY=dragY offsetY
}
函数dragDrop（e，ui）{
var元素=ui.draggable；
var数据=元素数据（“url”）；
var x=parseInt（ui.offset.left offsetX）；
var y=parseInt（ui.offset.top-offsetY）；
ctx.drawImage（元素数据（“图像”），x-1，y）；
}
}); // end$（函数（）{}）；

谢谢您的回复。但是我现在正在尝试学习如何在html中不使用jQuery。

    function dragend(e,ui){
      // relative to document
      var dragX=ui.offset.left;
      var dragY=ui.offset.top;
      // top-left of dropped element is at canvasXY
      var canvasX=dragX-offsetX;
      var canvasY=dragY-offsetY
    }

    function dragDrop(e,ui){
        var element=ui.draggable;
        var data=element.data("url");
        var x=parseInt(ui.offset.left-offsetX);
        var y=parseInt(ui.offset.top-offsetY);
        ctx.drawImage(element.data("image"),x-1,y);            
    }

}); // end $(function(){});
</script>

</head>

<body>
    <img id="house" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png"><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>