Cor de formas no CANVAS

15/10/2016

Ol�, estou tentando montar um gr�fico, neste gr�fico um quadrado aumenta de tamanho conforme o n�mero digitado pelo usu�rio.
Gostaria que esse quadrado ficasse com linhas pontilhadas e com a cor vermelha, por�m, quando adiciono os c�digos necess�rios para isso, o corpo do gr�fico tamb�m muda de cor e fica pontilhado. Gostaria de saber como deixar apenas meu quadrado pontilhado e na cor vermelha. segue o c�digo:

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" >
   
   function grafico(){
       var canvas = document.getElementById("canvas");
       var ctx = canvas.getContext("2d");
       
      
        ctx.moveTo(150,50);
        ctx.lineTo(150,250);
        
        ctx.moveTo(50, 150);
        ctx.lineTo(250, 150);
        ctx.stroke();
   }
    
    
    function draw() {
        
        var x = document.getElementById('valor').value;
        var y = document.getElementById('valory').value;
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
       
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        if ((x<=20&&y<=20)&&(x>=-20&&y>=-20)){
            x = x*5;
            y = y*5;
        }
        
        if (y==50){
            ctx.strokeRect (150, 100, x, y);
        }else{
            ctx.strokeRect (150, 100+(50-y), x, y);
        }
        
        ctx.moveTo(150,50);
        ctx.lineTo(150,250);
        
        ctx.moveTo(50, 150);
        ctx.lineTo(250, 150);
        ctx.stroke();
    }
  </script>
  <style>
      #canvas{
          border: 1px solid black;
          margin-left:30%;
          margin-top:10%;
      }   
      #valores {
          margin-left:36%;
      }
  </style>
 </head>
 <body onload="grafico()">
     <canvas id="canvas" width="300" height="300"></canvas>
     <form id="valores">
        <input type="number" id="valor" placeholder="insira o valor de X"><br>
        <input type="number" id="valory" placeholder="insira o valor de Y"><br>
        <input type="button" onclick="grafico();draw();" value="enviar">
     </form>
 </body>
</html>

Nairan

Curtir t�pico + 1

Responder

Posts

17/10/2016

Victor Machado

Ol� Nairan.
O que acontece � que ele ir� pintar todas linhas que forem desenhadas ap�s ser definido o estilo, ent�o antes desenhar as outras linhas voc� deve colocar novamente um novo estilo.


ctx.strokeStyle = '#f00';
if ((x<=20&&y<=20)&&(x>=-20&&y>=-20)){
            x = x*5;
            y = y*5;
        }
         
        if (y==50){
            ctx.strokeRect (150, 100, x, y);
        }else{
            ctx.strokeRect (150, 100+(50-y), x, y);
        }
         
ctx.strokeStyle = '#000';
        ctx.moveTo(150,50);
        ctx.lineTo(150,250);
         
        ctx.moveTo(50, 150);
        ctx.lineTo(250, 150);
        ctx.stroke();

Responder

Gostei + 0