Javascript 具有错误坐标的drawImage（）_Javascript_Html_Canvas

Javascript 具有错误坐标的drawImage（）

javascript html canvas

Javascript 具有错误坐标的drawImage（）,javascript,html,canvas,Javascript,Html,Canvas,我有一个问题：我正在使用html画布开发地图生成器，用户输入图像的X、Y、宽度和高度。但是当我使用用户输入的drawImage时，图像不适合画布XY和选择的高度和宽度（以像素为单位）。我能用什么来解决这个问题吗 <html lang=''> <head> <title>Map tools</title> </head> <body> <div align='center'> &l

我有一个问题：我正在使用html画布开发地图生成器，用户输入图像的X、Y、宽度和高度。但是当我使用用户输入的drawImage时，图像不适合画布XY和选择的高度和宽度（以像素为单位）。我能用什么来解决这个问题吗

<html lang=''>
<head>
   <title>Map tools</title>
</head>
<body>
    <div align='center'>
        <canvas id='map' class='mapcanvas' width="800" height="400">
        </canvas>
        <p><a href="#" onclick="loadXml()" class="submitbutton">Send</a></p>
        <textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
    </div>
</body>
<script>
function loadXml(){
co = document.getElementById("xmlinput").value.split(',') // X, Y, H, L
canvas = document.getElementById("map");
context = canvas.getContext("2d");
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>


地图工具

函数loadXml（）{
co=document.getElementById（“xmlinput”）.value.split（'，'）//X，Y，H，L
canvas=document.getElementById（“map”）；
context=canvas.getContext（“2d”）；
ground.src=http://i.imgur.com/Z3DyMAM.png'
ground.onload=功能（）{
drawImage（地面，co[0]，co[1]，co[2]，co[3]）；
}
}

地面未定义。我已经为你准备好了


地图工具

您的代码工作得非常好。只需将其添加到页面（创建图像对象）


地图工具

函数loadXml（）{
co=document.getElementById（“xmlinput”）.value.split（'，'）//X，Y，H，L
canvas=document.getElementById（“map”）；
context=canvas.getContext（“2d”）；
var地面=新图像（）；
ground.src=http://i.imgur.com/Z3DyMAM.png'
ground.onload=功能（）{
drawImage（地面，co[0]，co[1]，co[2]，co[3]）；
}
}

我能看看你迄今为止尝试过的代码吗？除非你提供代码，否则我们不知道什么不起作用。哦，对不起，发布代码基本上，答案是地面未定义。是的，伙计..还有doctype..哈哈：我的问题是画布的高度是400px，如果我尝试设置y300，图像将从画布上消失！如何解决这个问题？在画布上绘制图像的尺寸是多少？当设置Y=300（即在画布上放置图像的Y位置）时，图像将从该位置绘制..足够简单huhh？？

     <!DOCTYPE html />
    <html lang=''>
    <head>
       <title>Map tools</title>
    </head>
    <body>
        <div align='center'>
            <canvas id='map' class='mapcanvas' width="800" height="400">
            </canvas>
            <p><a href="#" onclick="loadXml()" class="submitbutton">Send</a></p>
            <textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
        </div>
    </body>
    <script>
    function loadXml(){
    co = document.getElementById("xmlinput").value.split(',') // X, Y, H, L
    canvas = document.getElementById("map");
    context = canvas.getContext("2d");
var ground=new Image();
    ground.src = 'http://i.imgur.com/Z3DyMAM.png'
    ground.onload = function (){
    context.drawImage(ground, co[0], co[1], co[2], co[3]);
    }
    }
    </script>
    </html>