我有一个问题: 我正在研究 map 生成器，使用 html Canvas ，用户输入图像的 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>
最佳答案
地面未定义。我已经为您准备好了。
<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>关于javascript - Canvas 坐标错误的 drawImage()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30643939/