• 0
Sign in to follow this  
Paulo Dantas

canvas com js em hmtl5 - ajuda.

Question

Olá pessoal,

não sei se estou postando no lugar certo mas é o seguinte, estava precisando de uma juda em um codigo com canvas, não sei o que fiz de errado no script, sou novo com js, alguém pode me ajudar?

O codigo é este:

<!DOCTYPE html>
<html>

<head>
<title>Canvas</title>
<script type="text/javascript">

$(document).ready(function() {                                     
  
  var Canvas;                                                      
  var CanvasContexto;                                              
  var NovoCanvas;                                                  
  var NovoCanvasContexto;                                         
  var Formato;                                                     
  var FormatoOriginal = "LinhaLivre"; 
  var Cor = "#000000";                            

  function Init() {
                                                                  
    Canvas = document.getElementById("Canvas");
    CanvasContexto = Canvas.getContext("2d");
                                                                
    var NovoCanvasContainer = Canvas.parentNode;                 
        NovoCanvas = document.createElement("canvas");             
        NovoCanvas.id = "NovoCanvas";                             
        NovoCanvas.width = Canvas.width;                          
        NovoCanvas.height = Canvas.height;                         
        NovoCanvasContainer.appendChild(NovoCanvas);             
        NovoCanvasContexto = NovoCanvas.getContext('2d');         
        NovoCanvasContexto.strokeStyle = "#DDDDDD";             
        NovoCanvasContexto.lineWidth = 5.0;                     

    if (Formatos[FormatoOriginal]) { 
          Formato = new Formatos[FormatoOriginal]();
    }

    $("#NovoCanvas").bind("mousedown mousemove mouseup", function(evento) {

          if (evento.layerX || evento.layerX == 0) {                 
            evento._x = evento.layerX;
            evento._y = evento.layerY;
          } else if (evento.offsetX || evento.offsetX == 0) {     
            evento._x = evento.offsetX;
            evento._y = evento.offsetY;
          }                                                        
              var func = Formato[evento.type];
            if (func) {
                  func(evento);
            }
        });
    }
      Init();                                                      
});




var Formatos = {};

                                                                
Formatos.LinhaLivre = function() {
      var Formato = this;
      this.comecou = false;                                         

    this.mousedown = function(evento) {
    NovoCanvasContexto.beginPath();                             
      NovoCanvasContexto.moveTo(evento._x, evento._y);             
      Formato.comecou = true;                                     
    };

    this.mousemove = function(evento) {
        if (Formato.comecou) {
        NovoCanvasContexto.strokeStyle = Cor; // Cor da linha        
        NovoCanvasContexto.lineTo(evento._x, evento._y);         
        NovoCanvasContexto.stroke();                             
          }
    };

    this.mouseup = function(evento) {
          if (Formato.comecou) {
        Formato.mousemove(evento);                                 
        Formato.comecou = false;                                 
        Desenhar();                                             
          }
    };
};



// O visitante quer desenhar um rectângulo 
Formatos.Rectangulo = function(evento) {
  var Formato = this;
  this.comecou = false;

  this.mousedown = function(evento) {                                             
    Formato.comecou = true;
    Formato.x0 = evento._x;
    Formato.y0 = evento._y;
  };

  this.mousemove = function(evento) {
    if (!Formato.comecou) {
      return;
    }

    // Calcular matematicamente 
    var x = Math.min(evento._x, Formato.x0),                                     
    y = Math.min(evento._y, Formato.y0),                                         
    w = Math.abs(evento._x - Formato.x0),                                         
    h = Math.abs(evento._y - Formato.y0);                                         

    NovoCanvasContexto.clearRect(0, 0, NovoCanvas.width, NovoCanvas.height);     

    if (!w || !h) {
      return;
    }

    NovoCanvasContexto.strokeStyle = Cor; 
    NovoCanvasContexto.strokeRect(x, y, w, h);                                     
  };
  
  // Desenha o rectângulo no canvas original
  this.mouseup = function(evento) {

    if (Formato.comecou) {
      Formato.mousemove(evento);
      Formato.comecou = false;
      Desenhar();
    }
  };

};


//Um circulo
  Formatos.Circulo = function(evento) {
    var Formato = this;
    this.comecou = false;

    this.mousedown = function(evento) {
      Formato.comecou = true;
      Formato.x0 = evento._x;
      Formato.y0 = evento._y;
    };

    this.mousemove = function(evento) {
      if (!Formato.comecou) { return; }

      NovoCanvasContexto.beginPath();

      NovoCanvasContexto.clearRect(0, 0, NovoCanvas.width, NovoCanvas.height);
      var Radius = Math.abs(Formato.x0 - evento._x)

                                                                              
      NovoCanvasContexto.arc(Formato.x0, Formato.y0, Radius, 0, Math.PI * 2, false)
      NovoCanvasContexto.strokeStyle = Cor; // Cor da linha
      NovoCanvasContexto.stroke();
    };

    this.mouseup = function(evento) {
      Formato.mousemove(evento);
      Formato.comecou = false;
      Desenhar();
    };

  };


// Uma linha
  Formatos.Linha = function(evento) {
    var Formato = this;
    this.comecou = false;

    this.mousedown = function(evento) {
      Formato.comecou = true;
      Formato.x0 = evento._x;
      Formato.y0 = evento._y;
    };
    this.mousemove = function(evento) {
      if (!Formato.comecou) { return; }

      NovoCanvasContexto.clearRect(0, 0, NovoCanvas.width, NovoCanvas.height);
      NovoCanvasContexto.beginPath();
      NovoCanvasContexto.moveTo(Formato.x0, Formato.y0);
      NovoCanvasContexto.lineTo(evento._x, evento._y);
      NovoCanvasContexto.strokeStyle = Cor; // Cor da linha
      NovoCanvasContexto.stroke();
      NovoCanvasContexto.closePath();
    };
    this.mouseup = function(evento) {
      if (Formato.comecou) {
        Formato.mousemove(evento);
        Formato.comecou = false;
        Desenhar();
      }
    };
  };


function Desenhar() {
      CanvasContexto.drawImage(NovoCanvas, 0, 0);                 
      NovoCanvasContexto.clearRect(0, 0, NovoCanvas.width, NovoCanvas.height); 
};

// O usuário escolheu o circulo
$("#forCirculo").click(function() {
  if (Formatos["Circulo"]) {
    Formato = new Formatos["Circulo"]();
  }
});

// O usuário escolheu o rectângulo
$("#forRectangulo").click(function() {
  if (Formatos["Rectangulo"]) {
    Formato = new Formatos["Rectangulo"]();
  }
});

// O usuário escolheu a linha
$("#forLinha").click(function() {
  if (Formatos["Linha"]) {
    Formato = new Formatos["Linha"]();
  }
});

// O usuário escolheu a linha livre/lápis
$("#forLapis").click(function() {
  if (Formatos["LinhaLivre"]) {
    Formato = new Formatos["LinhaLivre"]();
  }
});

// Cores
$("#cor000000").click(function() {
  Cor = "#000000";
});
$("#corFFFFFF").click(function() {
  Cor = "#FFFFFF";
});
$("#cor7c0608").click(function() {
  Cor = "#7c0608";
});
$("#corf3c421").click(function() {
  Cor = "#f3c421";
});

$("#opcSalvar").click(function() {
  var dataURL = Canvas.toDataURL("image/png");
  document.location.href = dataURL;
});


</script>
<style type="text/css">
#Container {
    position: relative;
    cursor: crosshair;
}
#Canvas {
    position: absolute;
    overflow: hidden;
    background-color: transparent;
    border: 1px solid #DDD;
}
#NovoCanvas {
    position: absolute;
    overflow: hidden;
    height: 600px;
    width: 800px;
}
</style>
</head>

<body>

<div id="menu" style="left: 0px; top: 0px">
    <strong>Formatos</strong><br>
    <a href="#" id="forCirculo">Circulo</a><br />
    <a href="#" id="forRectangulo">Rectângulo</a><br />
    <a href="#" id="forLinha">Linha</a><br />
    <a href="#" id="forLapis">Lapis</a><br />
    <strong>Cores</strong><br>
    <a href="#" id="corFFFFFF">Branco</a><br />
    <a href="#" id="cor000000">Preto</a><br />
    <a href="#" id="cor7c0608">Vermelho</a><br />
    <a href="#" id="corf3c421">Amarelo</a><br />
    <strong>Opções</strong><br>
    <a href="#" id="opcSalvar">Salvar</a> 
</div>
<div id="Container" style="left: 93px; top: -242px; width: 1361px">
              <canvas id="Canvas" width="800" height="600">
                <p>O teu navegador não suporta canvas</p>
            </canvas>
              <canvas id="NovoCanvas" width="800" height="600">
              </canvas>
          </div>

</body>

</html>

fonte: http://www.pttutoriais.com/352/canvas-apli...desenho-parte-1

http://www.pttutoriais.com/448/canvas-apli...rte-2#undefined

Já tentei entrar em contato com o autor mas não consegui resposta.

alguém pode me ajudar por favor !:(

Edited by Paulo Dantas

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

E qual é o problema no código?

Dica: responder "não está funcionando" não vai ajudar.

Recomendo que rode seu código num navegador com console de erros e de uma olhada no que está acusando.

Share this post


Link to post
Share on other sites
  • 0
E qual é o problema no código?

Dica: responder "não está funcionando" não vai ajudar.

Recomendo que rode seu código num navegador com console de erros e de uma olhada no que está acusando.

Já fiz isto mas não entendi o resultado, sou novo com js, mas mesmo assim muito obrigado já resolvi de outra maneira.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this