1

estou desenvolvendo um trabalho de faculdade que consiste basicamente em criar uma espécie de "Paint" utilizando o canvas do HTML5 em conjunto com Javascript, mas me deparei com um problema ao tentar atualizar um canvas que serve para mostrar o tamanho atual do tracejado...
Estou utilizando um input do tipo range para definir o tamanho do tracejado e o evento oninput para detectar a mudança de valor no input, no momento, estou com o código abaixo:

HTML
<input type="range" id="lineSize" class="no_margin range" value="2" min="1" max="20" />
<canvas id="showSize" width="40" height="40" />

Javascript

var lineSize = document.getElementById("lineSize");

function clearCanvas(canvas) {
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function updateLineSize(size) {
    var canvas = document.getElementById("showSize");
    clearCanvas(canvas);
    var ctx = canvas.getContext("2d");
    ctx.arc(canvas.width/2, canvas.height/2, size/2.0, 0, 2 * Math.PI, false);
    ctx.fillStyle = "#000000";
    ctx.fill();
}

updateLineSize(lineSize.value);

lineSize.oninput = function() {
    updateLineSize(this.value);
}

O que acontece é que, toda vez que a função updateLineSizeé chamada, ele sempre preenche o círculo com o tamanho do maior size já utilizado, mesmo após reduzir o valor no input.
Como eu poderia resolver esse problema?

----- EDIT -----
Eu consegui resolver o problema recriando o canvas toda vez que eu mudo o valor do input, alterando a função updateLineSize da seguinte forma:

function updateLineSize(size) {
    var holder = document.getElementById("showSizeHolder");
    while (holder.firstChild) {
        holder.removeChild(holder.firstChild);
    }
    var canvas = document.createElement("canvas");
    canvas.id = "showSize";
    canvas.className = "option";
    holder.appendChild(canvas);
    canvas.width = 40;
    canvas.height = 40;
    var ctx = canvas.getContext("2d");
    ctx.arc(canvas.width/2, canvas.height/2, size/2.0, 0, 2 * Math.PI, false);
    ctx.fillStyle = "#000000";
    ctx.fill();
}

Mas alguém saberia me explicar o motivo de não funcionar da outra forma?

1 Resposta 1

-1

Segue abaixo o script correto com alguns comentários:

// Vamos criar essa variável para evitar de sempre chamar document.getElementById
var canvas = document.getElementById("showSize");

// Vamos trabalhar em cima do mesmo contexto
var ctx = canvas.getContext("2d");

var lineSize = document.getElementById("lineSize");

function clearCanvas(canvas) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function updateLineSize(size) {
    clearCanvas(canvas);

    // O seu problema estava aqui.
    // Conforma você vai chamando o método .arc, apenas um caminho vai sendo criado.
    // Quando o método .fill é chamado, ele desenha o último caminho existente.
    // O seu problema é que já existia um círculo maior do caminho!
    // Ao chamar .beginPath e .closePath, o caminho é iniciado e terminado.
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, size / 2.0, 0, 2 * Math.PI, false);
    ctx.closePath();

    ctx.fill();
}

updateLineSize(lineSize.value);

// Apenas uma forma mais elegante
lineSize.addEventListener('input', function () {
    updateLineSize(this.value);
});

Segue um exemplo do JSBin: http://jsbin.com/wepaweyepo/edit?html,js,output

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 .