Skip to main content
1 de 3

HTML5/Canvas/Como colocar um evento de click em uma forma primitiva desenhada?

Animacao - botoes de play e pause Fiz uma animacao e gostaria de colocar os botoes de pause e play usando esses desenhos em formas primitivas.

Desenhando formas primitivas Como faco pra usar evento de click nas formas?

Aqui todo o codigo:

ANIMACAO - RequestAnimationFrame //canvas e contexto var canvas = document.getElementById('meu_canvas'); var contexto = canvas.getContext('2d'); var playpause; var x = 0; var desloc = 2; var LARGURA = 100; var ALTURA = 140; var frame = 1; var imagem = new Image(); imagem.src="IMG/ScottSprite.png"; imagem.onload = function() { contexto.drawImage(imagem,0,0,LARGURA,ALTURA,x,20,LARGURA,ALTURA); } //Caixa de botoes(Contem 3x funcoes: Desenhar uma caixa com DOIS botoes) boxButton(); window.requestAnimationFrame(playAnimation); //Função de animação function playAnimation() { contexto.clearRect(0,0,canvas.width,445); //Deslocar x = (x + LARGURA + desloc > canvas.width ? 0 : x + desloc); if ( x % (LARGURA/2) == 0) frame = (frame > 4 ? 2 : frame + 1); //Desenhar a imagem. desenharImagem(); //Chamando o cliclo novamente window.requestAnimationFrame(playAnimation);
                }
                    function desenharImagem(){
                    contexto.clearRect(0,0,canvas.width,445);
                    contexto.setLineDash([4,2]);
                    contexto.strokeRect(0,0,canvas.width,canvas.height);
                    contexto.drawImage(imagem,frame*LARGURA,0,LARGURA,ALTURA,x,canvas.height/2,LARGURA,ALTURA);
                                            
                    }
                    function botaoPlay() {
                    contexto.beginPath();
                    contexto.fillStyle="rgb(255,255,0)";
                    contexto.moveTo(430,450);
                    contexto.lineTo(460,465);
                    contexto.lineTo(430,480);
                    contexto.lineTo(430,450);
                    contexto.fill();
                    contexto.closePath();
                    
                    
                    
                    
                }
                    function botaoStop(){
                    contexto.beginPath();
                    contexto.fillStyle="rgb(255,55,55)";
                    contexto.arc(490,463,15,0,2*Math.PI, true);
                    contexto.fill();
                    contexto.closePath
                }
                    
                    function boxButton(){
                    contexto.beginPath();
                    contexto.fillStyle="rgb(100,100,100)";
                    contexto.moveTo(410,440);
                    contexto.lineTo(520,440);
                    contexto.lineTo(520,490);
                    contexto.lineTo(410,490);
                    contexto.lineTo(410,390);
                    contexto.fill();
                    contexto.closePath();
                    botaoPlay();
                    botaoStop();
                    
                    }
                    
                    //<button onclick="buttonPlay()">►</button>
                    //<button onclick="buttonStop()">||</button>
                        
                        
                        
                        
                        
                        
                        
                        
        </script>
</body>