Como faço para colocar um ou mais buttons no CANVAS e assim ser exebido no canvas,podendo ser clicado para executar uma função qualquer. <button onclick="funçãoqualquer()> executar função qualquer --->>>>
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Como faço para colocar um ou mais buttons no CANVAS e assim ser exebido no canvas,podendo ser clicado para executar uma função qualquer. <button onclick="funçãoqualquer()> executar função qualquer --->>>>
Fala, Samuel! Espero que esteja tudo bem!
Desculpe a demora em dar um retorno
Criar botões e demais funções, acharia interessante dar uma olhada na Formaçõ Frontend onde aprenderá como fazer essa interação com o usuário através do Javascript
Abaixo, vou deixar um dos exercícios do curso de Lógica de Programacão feito com um botão de seleção de cores
<canvas width="600" height="400"></canvas>
selecione a cor <input type="color">
<script>
var paleta = document.querySelector('input');
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
var desenha = false;
function desenhaCirculo(evento) {
if(desenha) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = paleta.value; // sempre pega o valor atual da paleta!
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
}
console.log(x + ',' + y);
}
tela.onmousemove = desenhaCirculo;
// atribuindo diretamente a função anônima
tela.onmousedown = function() {
desenha = true;
}
// atribuindo diretamente a função anônima
tela.onmouseup = function() {
desenha = false;
}
</script>Espero ter ajudado, Samuel
Um abraço e bons estudos
OK.VALEU.