atribuir valor de campo TEXT para variável em JAVASCRIPT

HTML

JavaScript

10/10/2016

Olá, estou tentando atribuir o valor para uma variável a partir de um campo input e depois colocá-lo como um dos valores no campo de valores ctx.fillRect do canvas.

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

Nairan

Curtidas 0

Melhor post

Victor Machado

Victor Machado

11/10/2016

Olá Nairan.

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">
GOSTEI 2

Mais Respostas

Nairan

Nairan

10/10/2016

CORREÇÃO, em ctx.fillRect (100, 100, x, 50);

no lugar da variável "x" é "valor".
GOSTEI 0
Nairan

Nairan

10/10/2016

Primeiramente, obrigado Hugo pela ajuda.

Como eu poderia limpar a tela?
GOSTEI 0
Nairan

Nairan

10/10/2016

Primeiramente, obrigado Hugo pela ajuda.

Como eu poderia limpar a tela?
GOSTEI 0
Victor Machado

Victor Machado

10/10/2016

Olá Nairan, me desculpe pela demora.

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);
    }
GOSTEI 0
POSTAR