Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Esconder IMG do Canvas

Amigos,

Alguém sabe como posso esconder a imagem publicada na tag da tela ? Eu só quero que ela apareça quando eu chama-la pelo método drawImage. Mas pelo fato de ter publicado ela na tag no html, ela fica aparecendo fixa na tela. Alguém sabe como posso oculta-la ?

<canvas id="tela" width="900" height="500"></canvas>

<img id="scream" width="77" height="77" src="https://s15.postimg.org/5dww30tmj/img_208459_20160413235615.jpg">

<script>
var raio = 10;
var alvoX;
var alvoY;

var tela = document.getElementById("tela");
var c = tela.getContext("2d");
var img = document.getElementById("scream");

var desenhaAlvo = function(x, y) {
    c.drawImage(img, x, y);
    c.strokeStyle = "black";
    c.strokeRect(1, 0, 899, 499);

    //circulo(x, y, raio+30, "white");
    //circulo(x, y, raio+20, "red");
    //circulo(x, y, raio+10, "white");
    //circulo(x, y, raio, "red");
};

var circulo = function(x,y,raio,cor) {
    c.fillStyle = cor;
    c.beginPath();
    c.arc(x,y,raio, 0, 2*3.14);
    c.fill();
}

var limpa = function() {
    c.clearRect(1,0,899,499);
 }

var limpaConsole = function(){
    console.clear();
}

var sorteia = function(max) {
    return Math.floor(Math.random() * max);
}

var desenha = function() {
  limpa();
  alvoX = sorteia(800);
  alvoY = sorteia(500);
  desenhaAlvo(alvoX, alvoY);
}

setInterval(desenha, 1000);
setInterval(limpaConsole, 5000);

tela.onclick = function(evento) {
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    if((x > alvoX - raio) && (x < alvoX + raio) && 
        (y > alvoY - raio) && (y < alvoY + raio)) {
            console.log("Acertou mizeravii !!!");
    }else{
            console.log("Errou mizeravii !!!");
    }
}
</script>

Antes que alguém pergunte, sim, estou tentando fazer um jogo de tiro ao alvo com a cara do Trump kkkkk.

Abraços.

2 respostas
solução!

hauhauhauhauauhauhauhahaua. Você pode mandar assim:

<img ... style="display:none"/>

Quando clicar, vc trocar esse style para display:block.

Vlww Alberto. Funcionou direto so colocando o style="display:none"