4

Como posso utilizar a tag canvas do HTML5 e fazer essa alteração em tempo real conforme eu insiro os dados no input? Já fiz o form e coloquei a tag canvas na página. Queria saber se no JQuery é possível alterar os dados que insiro no input e ao mesmo tempo altere a medida do canvas:

Codigo:

<input type="text"name="largura"/>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var largura = document.getElementById("largura").focus().value;
    var altura = document.getElementById("altura")..focus().value;
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(5,5,largura,altura);
</script>

Como seria a função no JQuery que alteraria essas variáveis em tempo real?

3
  • Tipo o que você gostaria de alterar? Tamanhos? Cor? Posição? Commented 23/04/2015 às 16:18
  • Opa Fernando, valew pela atençao! Eu queria alterar o tamanho por enquanto. Quero na verdade alterar todo a estrutura do canvas, porém para iniciar eu queria saber como alterar a largura e altura do retangulo. Mas teria que ser ocorrer conforme o valor fosse digitado no input. Commented 23/04/2015 às 16:36
  • Só um comentário, isto tá errado document.getElementById("altura")..focus().value; o corretor é document.getElementById("altura").focus().value;
    – Syzoth
    Commented 23/04/2015 às 18:12

2 Respostas 2

3

Sim, você pode fazer isso no evento keyup como no exemplo:

$(document).ready(function() { // Ao carregar a página
    $(this).on('keyup', 'input.canvas-settings', function(event){ // Ao soltar a tecla no input
        // Canvas.css( atributo data-prop do input, valor do input)
        $("canvas").css($(this).data('prop'), this.value);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Largura: <input type="text" data-prop="width" class="canvas-settings" value="100"><br>
Altura: <input type="text" data-prop="height" class="canvas-settings" value="100"><br>
<canvas height="100" width="100" style="border:1px solid red"></canvas>


JSFiddle

4
  • KaduAmaral acho que era isso mesmo que eu queria. Porém ainda ficou a dúvida com isso eu altero a medida do canvas, mas como altero o preenchimento que no caso esta sendo feito via javascript ctx.fillRect(5,5,largura,altura);? Mas valew pela ajuda, já me deu uma luz. Commented 23/04/2015 às 19:01
  • Eu fiz um outro Fiddle, ai eu acho que está apenas redesenhando por cima, não está mudando o tamanho, tanto que quando coloco um tamanho inferior ele não muda. Eu nunca trabalhei com Canvas, então nessa questão não vou poder te ajudar muito @JacielPlacidino. Mas o jQuery é simples...
    – KaduAmaral
    Commented 23/04/2015 às 19:24
  • voce me ajudou muito mesmo, eu só tinha dúvida quanto a replicar os valores do input dos campos em outro local da pagina. Brigadão! Commented 23/04/2015 às 19:28
  • Valeu @JacielPlacidino, precisando estamos aqui. Se a resposta respondeu sua pergunta, marque ela como aceita do lado esquerdo, para que o tópico seja fechado.
    – KaduAmaral
    Commented 23/04/2015 às 19:55
1

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Largura: <input type="text" class="canvas-attr" id="largura" value="100"/><br/>
Altura: <input type="text" class="canvas-attr" id="altura" value="100"/><br/>
<canvas id="c" height="100" width="100" style="border:1px solid red"></canvas>

JQuery

// Quando a largura ou a altura forem alteradas
$(".canvas-attr").on('change',function() {
    // Muda a largura e a altura do canvas
    var c = $("#c");
    c.attr("width",$("#largura").val());
    c.attr("height", $("#altura").val());

    // Cria variáveis com os valores de altura e largura
    var ctx = c[0].getContext("2d");
    var largura = $("#largura").val();
    var altura = $("#altura").val();

    // Cor vermelha para o preenchimento
    ctx.fillStyle = "#FF0000";
    // Colore o canvas inteiro
    ctx.fillRect(0,0,largura,altura);
});

JSfiddle

6
  • Oi GabrielOshiro... Essa é com certeza uma opção muito boa. Mas ainda continuo com a dúvida se e consigo passar esse parametro para o javascript ctx.fillRect(5,5,largura,altura); Commented 23/04/2015 às 19:03
  • @JacielPlacidino Tá aí, modifiquei um pouco para ficar mais próximo do que você pediu Commented 24/04/2015 às 2:51
  • Eu testei e ficou perfeito. Obrigado! @GabrielOshiro! Commented 24/04/2015 às 14:21
  • @JacielPlacidino A melhor maneira de me agradecer é com um positivo ;-) Commented 24/04/2015 às 16:40
  • Ressuscitando o tópico :D é possível fazer essa modificação e a pessoa de um outro computador ver essa modificação em tempo real sem ter a necessidade de atualizar a página, ou seja, ver o canvas sendo alterado?
    – user24136
    Commented 29/03/2018 às 18:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .