Caros Colegas,
Eis a minha resposta para o exercício da flor:
flor.html
<canvas id="tela" width="600" height="400"></canvas>
<script type="text/javascript">
var tela = document.querySelector("#tela");
var pincel = tela.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);
function desenharCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2*3.14);
pincel.fill();
}
desenharCirculo(300, 200, 40, "red");
desenharCirculo(300, 120, 40, "yellow");
desenharCirculo(300, 280, 40, "blue");
desenharCirculo(220, 200, 40, "orange");
desenharCirculo(380, 200, 40, "black");
</script>Tomei a liberdade de alterar o código proposto no exercício, para ter alguma interatividade.
Eis o código:
flor0.html
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<head>
<meta charset="utf-8" />
<title>mosaico de flores</title>
</head>
<body>
<h1>mosaico de flores</h1>
<form id="especificar_flores">
<label for="tamanho_flor">Qual é o tamanho da flor?</label>
<input type="text" name="tamanho_flor" value=""> <br />
<label for="quantidade_flores">Quantas flores?</label>
<input type="text" name="quantidade_flores" value=""> <br />
<button type="button" name="desenhar_flores">desenhar</button>
<p></p>
</form>
<canvas id="tela" width="600" height="400"></canvas>
<script type="text/javascript">
var tela = document.querySelector("#tela");
var pincel = tela.getContext("2d");
function desenharCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2*3.14);
pincel.fill();
}
function desenharFlor(tamanho_flor) {
var tamanho_flor = document.forms["especificar_flores"]["tamanho_flor"].value;
var raio = tamanho_flor / 6;
var x_centro = Math.floor((Math.random() * 600) + 1);
var y_centro = Math.floor((Math.random() * 400) + 1);
var desloca_circulo = raio * 2;
desenharCirculo(x_centro, y_centro, raio, "red");
desenharCirculo(x_centro, y_centro - desloca_circulo, raio, "yellow");
desenharCirculo(x_centro, y_centro + desloca_circulo, raio, "blue");
desenharCirculo(x_centro - desloca_circulo, y_centro, raio, "orange");
desenharCirculo(x_centro + desloca_circulo, y_centro, raio, "black");
}
function multiplicarFlores(quantidade_flores) {
var quantidade_flores = document.forms["especificar_flores"]["quantidade_flores"].value;
for (var i = 0; i < quantidade_flores; i++ ) {
desenharFlor();
}
}
var flores = document.querySelector("form#especificar_flores button[name='desenhar_flores']");
flores.onclick = multiplicarFlores;
</script>
</body>
</html>Grato pela atenção,
Dinaldo R. Trindade Jr.
Brasília/DF
