Gente, eu estou aqui quebrando a cabeça para fazer uma flor mais interativa, mas por enquanto não tive sucesso. Quando tiver mais tempo, ou mais conhecimento, irei concluir ela. Mas por enquanto, para dizer que não fiz nada, aqui vai o código simples da minha flor!
<meta charset="utf8">
<canvas width="600" height="400"></canvas>'
<script>
function mostra(frase) {
document.write(frase);
document.write("<br>");
}
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = "lightgrey";
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2*3.14);
pincel.fill();
}
function desenhaFlor (cor1, cor2, cor3,cor4,cor5) {
desenhaCirculo(300, 200, 25, cor1);
desenhaCirculo(350,200,25, cor2);
desenhaCirculo(250,200,25, cor3);
desenhaCirculo(300,250, 25, cor4);
desenhaCirculo(300,150,25, cor5);
}
desenhaFlor("yellow", "red", "green", "blue", "orange");
</script>