canvas com js em hmtl5 - ajuda.

Paulo Dantas · Junho 3, 2012

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 !:(

Editado Junho 3, 2012 por Paulo Dantas

fiote · Junho 4, 2012

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.

Paulo Dantas · Junho 10, 2012

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.

Entrar

canvas com js em hmtl5 - ajuda.

Pergunta

Paulo Dantas

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

fiote

Link para o comentário

Compartilhar em outros sites

Paulo Dantas

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades