具有错误坐标画布的drawImage（）答案

【问题标题】：drawImage() with wrong coordinates canvas具有错误坐标画布的drawImage（）
【发布时间】：2015-06-04 21:01:29
【问题描述】：

我有一个问题：我正在开发地图生成器，使用 html 画布，用户输入图像的 X、Y、宽度和高度。但是当我在用户输入中使用 drawImage 时，图像不适合 Canvas 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>

【问题讨论】：

我可以看看你到目前为止尝试过的代码吗？？
除非您提供代码，否则我们将不知道什么不起作用。
哦，对不起，贴出代码

标签： javascript html canvas

【解决方案1】：

地面未定义。我已经给你了。

<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>
			<img id='ground' style='display: none' /> <!--You forgot the image!-->
    </div>
</body>
<script>
function loadXml(){
  var co = document.getElementById("xmlinput").value.split(','), // X, Y, H, L
      canvas = document.getElementById("map"),
      context = canvas.getContext("2d"),
      ground = document.getElementById('ground'); //ground was undefined!
  ground.src = 'http://i.imgur.com/Z3DyMAM.png'
  ground.onload = function (){
    context.drawImage(ground, co[0], co[1], co[2], co[3]);
  }
}
</script>
</html>

【讨论】：

【解决方案2】：

您的代码完美运行。只需将其添加到页面（创建图像对象）

     <!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>

【讨论】：

基本上，答案是未定义的。
是的，伙计..and doctype too ..haha :P
但我的问题是画布是 400px 高度，如果我尝试设置 Y 300，图像会从画布上消失！我该如何解决这个问题？
要在画布上绘制的图像的尺寸是多少？当您设置 Y=300（即在画布上放置图像的 Y 位置）时，您的图像将从该位置绘制。够简单吧？？