Cor de formas no CANVAS

15/10/2016

6

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

Nairan

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

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários,
consulte nossa política de privacidade.

Aceitar