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.