Я новичок в холсте HTML5, и до сих пор я узнал, как обрабатывать ввод данных с клавиатуры и мыши. Но как бы вы пошли, проверив ввод текста? Например, пользователь вводит текст, говорящий, ходить 20, который будет перемещать объект на 20 пикселей. Каков наилучший способ выполнить эту задачу?Как перемещать объект в холсте HTML5 с помощью ввода текста?
Вы получаете значение входных данных и использовать его в своей функции, как и другие движения:
document.getElementById('textFieldID').value
Вот рабочий пример для вас. Просто введите номер в текстовый ввод и нажмите enter. Попробуйте в https://jsfiddle.net/w97zp61u/
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded',function(){
var canvas = document.getElementsByTagName("canvas")[0], input = document.getElementsByTagName("input")[0],
ctx = canvas.getContext('2d'), dy;
canvas.width =300, canvas.height =300, canvas.style.border ="1px solid black";
input.style.width = 300+"px", input.style.display="block";
var o ={
init: function(){
this.width = 10;
this.height = 10;
this.x = (canvas.width-this.width)/2;
this.y = canvas.height-this.height;
this.oy = this.y
}
}
o.init()
function draw(){
o.y-= 1
if(o.y>o.oy-dy){
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.fillRect(o.x,o.y,o.width,o.height)
window.requestAnimationFrame(draw)
}
else{
o.init()
window.setTimeout(function(){
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.fillRect(o.x,o.y,o.width,o.height)
},1000)
}
}
function moveUp(e){
if(e.keyCode === 13){
dy = parseFloat(input.value);
window.requestAnimationFrame(draw)
}
}
document.addEventListener('keydown',moveUp)
})
</script>
</head>
<body>
<div>
<canvas></canvas>
<input type ="text" placeholder ="type a number, then press enter"> </input>
</div>
</body>
</html>