atribuir valor de campo TEXT para variável em JAVASCRIPT
10/10/2016
0
ctx.fillRect(100,100, **minha variável** , 0);
porém, não está funcionando.
se alguém puder me ajudar, agradeço.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
function draw() {
var valor = document.getElementById('valor').value;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (100, 100, x, 50);
}
</script>
<style>
#canvas{
border: 1px solid black;
margin-left:30%;
margin-top:10%;
}
</style>
</head>
<body onload="draw();">
<canvas id="canvas" width="300" height="300"></canvas>
<input type="text" id="valor">
<input type="button" onclick="draw();" value="enviar">
</body>
</html>
Nairan
Post mais votado
11/10/2016
Eu testei o seu código com a sua correção, ele está funcionando.
A unica coisa que você precisa fazer é limpar o canvas quando for criar um novo retângulo.
E colocar o tipo do input para number.
<input type="number" id="valor">
Victor Machado
Mais Posts
10/10/2016
Nairan
no lugar da variável "x" é "valor".
11/10/2016
Nairan
Como eu poderia limpar a tela?
11/10/2016
Nairan
Como eu poderia limpar a tela?
14/10/2016
Victor Machado
Para limpar você só precisa colocar essa linha antes de desenhar novamente.
ctx.clearRect(0, 0, canvas.width, canvas.height);
A sua função Draw ficará assim:
function draw() {
var valor = document.getElementById('valor').value;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.clearRect(0, 0, canvas.width, canvas.height); //limpa o canvas
ctx.fillRect (100, 100, valor , 50);
}
Clique aqui para fazer login e interagir na Comunidade :)